HTML5 #5: Semantic Elements

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-05-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] Do the usual for the header: Add your name(s) as a comment. Set the title to "BCU". Use the BCU favicon.

· [4] The Briar Cliff University logo in the top left corner is an image. Insert it at the top of your document. Set its height to 100 pixels and its width to 300 pixels. 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] Design a table with 3 columns and 2 rows. [3] a) The first row is the table header. You need to insert three pics in each column. The three pics are names magnifying-glass.png, mortarboard.png, and laptop.png and should be inserted in the three cells of row 1. Set a [3] height of 100 pixels, a [3] width of 100 pixels, and [3] alternate text for each of the three pictures. Also in the first row, add text under each picture in each column. The description texts are in the following order "Undergraduate Programs, "Graduate Programs", "Online Degree Completion". These texts next to each picture is just ordinary paragraph text. [3] b) In the second row, add text in each column as table data. The text to insert in each cell of row 2 starts with: "Chase your..", "Advance more..", "Finish what..." [3] Each Learn More » text is a hyperlink (the » is called a right-angle quote—don't copy and paste it, check to see what its entity code is). 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] The text After 11 days on a mission… is the body of the article and it is a paragraph.

· [1] The content from the Best Colleges image (including the image) to the end of the document is a footer. [1] The image is here. [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 blue items are hyperlinks. Each item should link to http://www.example.com. [8] The seven blue items are also an unordered list.