Description

The objective of this assignment is to introduce you to the Hyper-text Markup Language (HTML – specifically, HTML-5) document structure and a very limited amount of web-page styling using Cascading Style Sheets (CSS). Specifically, in this assignment, you will create the first two HTML pages that will eventually be part of the Website you will build for this course (You will be given assignments to update and add functionality to the pages as we progress through the semester).
The first two pages of your website will be your weekly schedule of key events and your widgets. Your schedule page should contain a table with information about key events that you attend during the week – though content is not the primary focus here – we’re mostly interested in you getting your web development environment up and running. After you are done with that, you will create a second page that contains embedded widgets (a YouTube Playlist and Twitter Tweet) of your choice. Finally, you will link the two pages together to create a two-page
“Website”. You should use HTML-5 to develop your Website and avoid the use of deprecated elements. This assignment specification has 5 pages.

2 Requirements
Your schedule should be displayed on the first Web (that is., HTML-5) page you create. Your schedule page should consist of an HTML table containing with information about your favorite events. Your weekly schedule table should contain at least seven (7) rows – at least one for each day of the week. You can include events that recur on different days, but your schedule table should contain unique events as well.
Each row in your schedule table should contain:
➢ The day of the week the event occurs.
➢ The name of the event.
➢ The time start and anticipated end time for the event.
➢ The location of the event (address or link to a meeting).
➢ A phone number associated with the event location (if available).
➢ A URL with information about the event
Use embedded CSS to display borders around the navigation links and HTML table containing your events.
The second Web page you should create is the “My Widgets” page, where you should embed a YouTube Playlist and a Twitter Tweet as items in an ordered list. The two pages should be linked via a links embedded in a table or paragraph elements which are contained in an HTML div or nav element at the top of the page. Below are examples of what we are looking for on your events and widgets pages (at a minimum – you are free to add additional information and more palatable styling).
The following pages contain detailed examples and instructions on the required functionality for this assignment
Figure 1: An example My Weekly Schedule page (You are free to add more styling). Note, when the My Widgets link is selected, the browser should display the My Widgets page pictured in Figure 3 below.

Figure 2: Web Page displayed when the hyper-link to the Breakfast

Figure 3: An example My Widgets page containing a YouTube Playlist and a Twitter Tweet. (You should find and embed playlist and tweet of your own choosing). Note, when the My Schedule link is selected, the browser should display to the My Schedule page pictured in Figure 1 above.

To incorporate your You Tube Playlist, first find a You tube playlist you would like to embed. Then follow the instructions at the following link on how to obtain the HTML necessary to embed the playlist:

https://support.google.com/youtube/answer/171780?hl=en

Next, copy the html provided, and paste it into your Widgets page.

To incorporate a Twitter Tweet on your Widgets page, you need a Twitter Account.
Go to www.twitter.com to sign up for twitter (it’s free), or login if you already have an account. Next, follow the instructions at the link below to obtain the HTML code necessary to embed a tweet (Note, you can skip steps 4 and 5)

https://www.businessinsider.com/how-to-embed-a-tweet

You should embed the HTML code for your YouTube playlist and tweet within their own appropriate HTML block element such at a div, section, or <h1> – <h6> ( see https://www.w3schools.com/html/html_blocks.asp ) on your Widgets page.

Select a Tweet of your choice, and then select Embed Tweet after clicking on the downwardarrow (illustrated in the figure below).

3 Evaluation
Your submission will be graded on the following items (out of 50 possible points + 5 bonus points):
• Schedule table with at least 7 events (one for each day of the week) is present and formed using a table element <table>. At least 3 of the events must have Physical Locations. 8 points
• Navigation links are present at the top of each page, function correctly, and are contained in a <nav> or <div> element tag. 4 points
• For each event in the table, the contact’s cells contain day, event name, event start and end time, location of the event, phone number (if available) and a link to information about the event. 8 points
• HTML code is readable and indented. 5 points
• Meta information is supplied specifying UTF-8. 5 points
• HTML for each page passes w3c validator (https://validator.w3.org/ ), NOTE: frameborder errors on the iframe tag used for embedding the YouTube video are acceptable. Warnings are accepted. 5 points
• CSS for each page passes w3C validator (https://jigsaw.w3.org/css-validator/) without errors. Warnings are accepted. 5 points
• Bonus points – Eliminate the errors caused by the frameborder attribute in the iframe tag but you must find a new attribute to replace the frameborder attribute in the iframe tag. The new attribute must keep the border hidden as in the example – and your myWidgets page must still embed the YouTube video and tweet.) 5 points
• myWidgets page should have a working YouTube Playlist item as the first item in an ordered list. 5 points
• myWidgets section should have a working Twitter Tweet as the second item in an ordered list. 5 points

4 Submitting your assignment via Canvas
• Your submission should be packaged in a zip file. When opened, it must create a directory titled ‘<UMN x.500 ID>’ containing all your files – including your external CSS style file(s) if you use them. The name of the folder or directory containing your files should be your x.500 id.
For example, Professor Challou would submit his assignment by tarring or zipping up a directory named chal0006. You should name your HTML files mySchedule.html and myWidgets.html.

Submit your zip file to the course Canvas site via the Homework 1 Submission Link.

5 Resources to review and reference for this assignment:

HTML/Forms – Chapters 2 and 3 in your zybook
CSS – Chapter 4 and 5 in your zybook
CSS – embedding CSS styling in your Web Page (Internal Style Sheet) https://www.w3schools.com/css/css_howto.asp
Adding a border to a table using CSS: https://www.w3schools.com/css/css_table.asp
Information on various HTML elements (div, nav, lists, table, header elements (i.e., h1, h2, …, h5)):
Search www.w3schools.com/html
How to embed a tweet on your Webpage:
https://www.businessinsider.com/how-to-embed-a-tweet How to embed a YouTube video or playlist your Webpage:
https://support.google.com/youtube/answer/171780?hl=en