Homework Assignment 1 A

Homework Assignment 1 A

simple HTML web page

The goal of this assignment is to build a simple web page that contains images, CSS, text, and hyperlinks.

1. Objectives

The objectives of this assignment are to learn the basic page development cycle of creating the HTML, editing, saving, styling, and general photo or image layout using the HTML commands.

2. Specifications

2.1 Inputs – Images

There are several PNG or JPG files needed to complete the assignment. They are included in the ZIP file and are itemized below.

• John_Adams-SFBMorse.jpg
• Morse_telegraph.jpg
• Samuel_Morse_with_his_Recorder_by_Brady, 1857.png
• 800px-International_Morse_Code.png

2.2 Inputs – text

There are several paragraphs of text in the expected output. These paragraphs are shown below.

• Samuel Finley Breese Morse, (April 27, 1791 – April 2, 1872) was an American painter andinventor. After having established his reputation as a portrait painter, in his middle age Morse contributed to the invention of a single-wire telegraph system based on European telegraphs. He was a co-developer of Morse code and helped to develop the commercial use of telegraphy.
• An artist? Morse, upon graduating from Yale, went on to become a noted painter. Hepainted the portraits of John Adams & James Monroe, the second and fifth American Presidents. His work as an artist took him to England and Europe. There are several of his paintings available on the Wikipedia page on Samuel FB Morse.

– The link is https://en.wikipedia.org/wiki/Samuel_Morse

• Inspired by tragedy. While Morse was painting in New York, a horse messenger delivereda letter from his father in New Haven, Connecticut that read, “Your dear wife is convalescent”. The next day he received a letter from his father detailing his wife’s sudden death. Bythetimehegothome-shewasburied. Heartbrokenthatfordayshewasunawareofhis wife’s failing health and her death, he decided to explore a means of rapid long distance communication.
• Troubleshooting and building the prototype. Morse started his first prototype using ideasfrom England, where a multiple wire system could transmit a message over 10 miles. Morse then came back to New York and enlisted Professor Leonard Gale to help build a single wire transmission system. The first message sent in the Speedwell Ironworks in Morristown, New Jersey was “A patient waiter is no loser”.
• Prototypes & production. Morse sought government funding and used that to build thesingle wire system as a proof of concept. This project was successful and lead to commercial development of a nationwide telegraph network.
• Patentsandlegalissues.Themulti-wiresystemwentintoproductionin1837whileMorse’ssingle wire system emerged in 1838. The multi-wire system being more expensive lost to Morse’s ideas. Lawsuits for patent rights went on for 10 years until Morse finally won.

2. Inputs – CSS

The CSS for this web page is shown below.

<style>
body	background-color:ivory; font-family:helvetica; color:sienna; padding-left:80px;width:825px
h2	text-align:center
img	padding:6px; border-width:1px; border-style:solid; border-color:burlywood
table	outline:solid burlywood thin;font-size:14px
caption </style>	caption-side:bottom;padding-top:4px

2. Output

The layout of the text and images referenced in the Inputs section above is shown below.

Figure 2.1 shows the full layout. There may be some variance in the image positions depending upon screen resolution and magnification.

Figure 2.1: The webpage.

3. Resources

There are many, many resources on HTML available online. The list below should help you get

quickly started.

• Quick and complete introduction to HTML: Study HTML and Learn to Code.
• A complete set of examples for any HTML developer:HTMLgoodies – an excellent HTML resource.
• AWindowstexteditorthatisquickandeasytouse-notepad++:Thenotepad++homepage with instructions, download links, and more.

There are many different examples that were provided during lecture and are in Lecture4:AHypertextMarkupLanguagePrimer slide deck.

Note that the links above work in most Acrobat Readers – with one notable exception – the Webcourses PDF reader in the browser. To take advantage of the links, download this assignment PDF and use Adobe’s Acrobat reader.

4. Submission Instructions

The assignment shall be submitted via WebCourses. The two files submitted should be the hw1.html source file and a PDF that contains a screenshot of the webpage on your desktop’s Chrome browser.

Make sure to include a comment at the top of your main source file that contains the following Academic Integrity statement(substitute yourname and NID) – “I [name] ([NID]) affirm that this program is entirely my own work and that I have neither developed my code together with any another person, nor copied any code from any other person, nor permitted my code to be copied or otherwise used by any other person, nor have I copied, modified, or otherwise used programs created by others. I acknowledge that any violation of the above terms will be treated as academic dishonesty.”

5. Grading

Scoring will be based on the following rubric:

Table 5.1: Grading Rubric

Deduction	Description
-100	Does not render on Chrome
– 50	Does not reference images in the pic directory
– 10	Does not render an image – deduct for each image
– 5	Does not have a boldface opening statement in accordancewiththefinishedwebpageprovided-deducted for each missing boldface sentence
– 25	Does not have statement PDF containing screenshot of the webpage taken on the student’s PC rendered in the Chrome browser.
– 25	Does not have Academic Integrity statement
Start with 100 points and deduct per the schedule above