Finish Program 8

These instructions cover the second part of the assignment. Refer to Module 9 for the starting instructions.

Add optimized screenshots and navigation to a new web page.

1. Did you backup your work to a cloud drive and/or USB stick drive? Do it again. :-)
2. Create optimized screenshots for each of your programs 3, 4, 5, 6, and 8 by using the Images for the Web tab Production information.
   • In your program folder, add a new folder called images.
   • Include at least 5 screenshots related to these projects:
     1. (M3, P2) Time and tasks output.
     2. (M4, P3) Tessellation turtle drawing.
     3. (M5, P4) Drinks shop order output.
     4. (M6, P5) Benton temperature turtle chart.
     5. (M7, P6) Walla Walla matplotlib temperature chart.
     6. (M7, P7ic) Extra dictionary.
     7. (M9, P8) Melting points matplotlib chart. ← Required.
   • Copy the five resized and compressed .PNG files and paste them into this new images folder.
3. Create a new file in the program folder, named index.html. This is the default home page file name for most web servers.
   1. Copy the necessary HTML tags from the elements2.html page, up to the beginning of the <table> and paste them at the top of the new index.html page.
   2. Copy/paste the <footer> with copyright statement, and ending </body> and </html> tags.
   3. Update the text:
      • <title> tag to briefly describe the page, such as "Welcome to ..." or "Showcase of..."
      • Update the <h1> to title the page.
      • Update the <p> paragraph to explain the page.
   4. View your new page in the browser to confirm that it renders as intended. If not, check that each tag has a beginning and end, and that everything is spelled correctly.
   5. Add images:
      • Add five <img /> tags, each with the folder name images/ and source name (which is the filename), along with an alternative description, like this: <img src="images/tessellations.png" alt="Tessellation made with Python running the Turtle module." /> Notice that the tag is "self-closing."
      • View the web page again to see how the images rendered. If some of them did not render, then double-check the spellings of each filename and that it is sourced using the correct folder name.
   6. Add hyperlinks to each HTML page:
      • In the index.html page, just under the <header> tag, add a <nav> tag. Between the beginning end ending <nav> tag, add an <a> anchor tag for each of the pages, like this: <nav> <a href="index.html">Home</a> <a href="elements2.html">Elements</a> </nav>
      • Copy that <nav> block of code to the elements2.html page, just under the ending </header> tag.
      • Refresh the page in the browser and click on those hyperlinks to see how they move from one page to the other.
4. Update the stylesheet. Many properties can be added to image elements, including width, height, border, margin, padding, box-shadow, transform, transition, clip-path, etc. This stylesheet selector for images adds a border to each image.
   1. Add the selector to your existing main.css file, under the last selector; at the bottom: img { border:2px solid orange; border-radius: 5px; } Change the width and color of the border.
   2. To improve the page layout, give the images a width, some margin, and top alignment by adding these properties and values to the existing img {} selector: width:45%; margin:2%; vertical-align:top;
   3. Add navigation style:
      1. Copy the nav {} style selectors from Module 9 > CSS tab > Page Layout section.
      2. Paste it at the bottom of the main.css file.
      3. Update the colors
   4. View your new index.html page in the browser to see the new text, colors, and images.
   5. Correct typos and syntax errors in the code to improve the output.
   6. Pat yourself on the back! You've made a website!

Submit Program 8

Zip together the program folder that holds the following folders and files:

• data/period-table.json
• elements2.html
• elements2.py
• images/ folder with 5 PNG files.
• index.html
• main.css

• Mac
  Select the file(s) and right-click to choose Compress files.
• Windows
  Select the file(s) and right-click to choose Send to... → Compress (Zipped) archive.
• Chromebook
  Select the file(s) and right-click to choose Zip selection.

Upload the .zip file to the Module > Assignment in Canvas. To score the work, the Instructor/TA will download the zip archive and run your .py file as well as view your website in the browser.

Extra Credit: If you got your ENGR web server connected, then transfer the entire program folder to it. View the home page in the browser and click on the hyperlinks to see how they work. Copy the URL to your website's home page; it will look like this, but with your username: https://web.engr.oregonstate.edu/~vanlondp/p8-vanlonden-web/. Paste that URL into the Module 10 > Program 8 Upload link in Canvas.