HTML 03

We are going to create the HTML for this page. Because HTML5 is for creating the structure of a document and not for formatting the document, your document will look nothing like the image (because we are not doing any CSS styling). Instead, it will look like this. Open the file HTML5-03-BCUHome.txt. Change the plain text document to an HTML file and make the following changes, all of which have to do with structuring the document. Points for everything are in square brackets. Basically, every tag (element) and every attribute is one point.

·         [4] The Briar Cliff University in the top left corner is an image. Insert it at the top of your document. The file is http://www.tomkleen.com/CSCI425/Images/bcu-logo.png. Set its height to 100px and its width to 300px. Add alternate text.

·         [1] The six white links at the top (About through Athletics) are a navigation bar. [6] Each of the six items is a hyperlink. Link to http://www.example.com for each hyperlink. [7] The six items are also an unordered list.

·         [3] The next three items are a table with three columns and two rows. [3] The large gray text goes in the top row of the table and is a table header row. [3] Each of the three items in the table header is h1 text. [3] The three pics are names magnifying-glass.png, mortarboard.png, and laptop.png and should be inserted in the three cells of row 2. Locations: http://www.tomkleen.com/CSCI425/Images/magnifying-glass.png, http://www.tomkleen.com/CSCI425/Images/mortarboard.png, http://www.tomkleen.com/CSCI425/Images/laptop.png. Set a [3] height of 100px, a [3] width of 100px, and [3] alternate text for each of the three pictures. [3] The smaller gray text next to each picture is just ordinary paragraph text. [3] Each Learn More » text is a hyperlink. Also link these to http://www.example.com.

·         [1] The UPCOMING EVENTS (and the list of events below it) on the left is an aside. [1] The text UPCOMING EVENTS is h1 text. [6] The five items are an unordered list of hyperlinks. [5] Link each hyperlink to http://www.example.com.

·         [1] The IN THE HEADLINES (and the text below it) is an article. [1] The text IN THE HEADLINES is h1 text. [1] The text "Things I'm grateful for…" is h2 text. [1] The text Jan 30, 2017 is a date. [1] When you hover over the date, the date should appear. [1] The text After 11 days on a mission… is the body of the article and it is a paragraph.

·         [1] The blue section at the bottom is a footer. [1] The image is http://www.tomkleen.com/CSCI425/Images/best-colleges.png.  [1] Set the height to 120, [1] the width to 100 and [1] add alternate text. [4] The address (four lines starting with 3303 Rebecca Street) is four ordinary paragraphs. [7] The seven yellow items are hyperlinks. Each item should link to http://www.example.com. [8] The seven yellow items are also an unordered list.