Math 300 - Homework Assignment #2 (back to Math 300 main page)

The assignment is due Tuesday, July 11, 11:59pm.

Assignment is worth 100 points.

 Part 1 (30 points).

In this part you are required to create a webpage from scrath. The name of the file representing the webpage should be "animal.html" and it should contain the following elements:
  1. A heading (using HTML heading tag) containing an animal of your choice;
  2. A paragraph (or a couple of them) describing your first time to see that animal. They don't have to be true, but your writing skill is not important here;
  3. An image of the animal (or pretending to be it). You might upload an image file to the server or use some external link;
  4. A table with 3 columns, first of which will be empty, second will be named "cuteness" and third is "bloodthirstiness" (both in italic). Then there should be a row for your animal, having its name in column #1 and numbers in columns #2 and #3 representing corresponding property of an animal on a scale from 1 to 10. And finally the table should have another couple of rows with other animals in the same format, for comparing purposes. Conceptual example (your table should look way less ugly and prehaps use proper HTML tag):
        cuteness bloodthirstiness
    raccoon  8    7
    fox   9    5
  5. An unordered list with important traits of the animal;
  6. A minor heading (use another HTML heading tag) describing the following link;
  7. A link to a web-site of your choice.
Also, the page should be titled "[animal] hacking". By "titled" here it is meant that this name should be displayed on a browser tab with the page (like "Math 300 - Homework Assignment #2" is displayed for this exact page).

 Part 2 (30 points).

For this part you already have an HTML file which you can get by this link. Save the file to some directory on you local machine, and then create a CSS file named "cats.css" to format the HTML file so that it looks more or less like this image. Note that HTML file already references "cats.css", so you should use exactly this name and place the file in the same folder as you saved the HTML file.

A few things should be noted:
  1. You are not permitted to change any HTML code - all changes in appearance must be made in the separate CSS file you created (named "cats.css").
  2. The details of appearance will depend on the size and shape of the browser window. The picture always stays at the right of the window, and the center section grows and shrinks to fill the space between the navigation sidebar and the picture. Thus, do not worry unreasonably about the position of words on the page.
  3. Background color of the links in the navigation sidebar turns white green (or any other color different from white) when you mouse over them.
    In class I showed you how to modify visual appearance of the hyperlinks in the whole HTML docuemnt (see slide 24 or the very end of CSS file solution for ICE#5). You can also restrict this to be applied only to specific parts of your document. For example, to make all visited links yellow only in navigation divisor you can use "#navigation a:visited { color: yellow; }" in your CSS file. Also note that you can use many other CSS properies here, e.g. background to set background color of a visited link. You can find some other examples here.
  4. The fonts you can see on the image are: Times New Roman (navigation sidebar), Sans-Serif (everything else).
  5. The colors you can see on the image are: #8C0003 (header background), #807F80 (navigation sidebar background), #E08D97 (foreground color of some headers). Everything else is either black or white.
  6. Some tips on getting proper layout of the page:
    1. You have 4 top-level divisors (<div>): heading, navigation, main, footer. To arrange them properly you may use display CSS porpety with one of the two values: inline-block, block.
    2. If you want the text to flow around the picture you may use float CSS porpety with proper value.
    3. If you use display property as mentioned above, your text in the main divisor will strech to the size of your page and you won't get desired result. To prevent this you may use maxwidth CSS property.
    4. You can take a look at my solution for ICE#5. The layout is pretty similar to what you need to have in this assignment, expect that there is no separate divisor for header and footer should be rendered differently.
    5. The above points gives you one of the possible solutions. There is a bunch of other ways to achieve the same result which you may find online. Any approach is fine if you get the same layout as you see on the picture.
    6. For this assignment you may need some CSS properties we haven't covered in class. That's how I expected it to be since there are really lots of them and we couldn't cover everything in class. This is a pretty handy reference you can use to get what you need.

 Part 3 (30 points).

In this part you are required to create another webpage from scrath. The name of the file representing the webpage should be "sums.html" and it should duplicate this page.

A few things should be noted:
  1. You are supposed to embed MathML and SVG code in your HTML code to render the formulas and the graph. Everything else should be typeset as plain HTML.
  2. Remeber that MathML is not supported by Google Chrome, Microsoft Explorer or Edge. In order to have MathML code properly rendered in these browser you should add reference to MathJax script to your docuemnt header. Check out this example we had in class.
  3. Recall that MathML does not allow specifying plain text without surrounding it with any tags (like we often do in HTML). That's why I'm suggesting you to have all the "English" text typeset as plain HTML and MathML should be used only to render formulas and nothing else. If you do want to place regular plain text inside MathML environemnt you should use <mtext> tag.
  4. Note that parabola you see on the graph was rendered without using object. If you take a closer look at it, you will see that it consits of strait lines. So the suggestion is that you come up with some set of points (e.g. take x-value 0, 0.1, 0.2, 0.3, 0.4, etc. and calulate corresponding y-values using parabola equation) to approximate the cureve. Obviously, you may use object (with Bezier Curves) if you want. If you do that, you will get 5 extra points.
    Here is the script (written in Python; the one I showed you in class) which you can use to generate points approximating your parabola. You can use this link to run Python code online. Here is the link to sample SVG document (which I also used in class).
  5. You can ignore the footnote you see on the picture (saying where does this text comes from) and may not include it in your document.

 Publishing your results (10 points).

In order to publish your results and put everything together do the following:
  1. In your home directory on you should already have "homeworks" directory under the "public" directory. Create a sub-directory named "hw02" in the "homeworks" directory.
  2. Upload all the files you've created (it should be at least "animals.html", "cats.css", "sums.html" and may be some other files like CSS styles you used for Part 1 or Part 3) and the "cats.html" you downloaded in Part 2 to the newly created "hw02" directory.
  3. Create a file named "index.html" directly in your "public" directory (not in "hw02"!).
  4. "index.html" should be a simple web page that contains your name and three links referecing the files you've uploaded:"animals.html", "cats.html" (HTML, not CSS!), "sums.html". You can name the links "My Animal", "Cat Studies 432", and "Riemann Sums".
  5. The layout of the page is not important, you can do anything you want there. Just make it clear for the grader where the results from Part 1-3 could be found!