Description

The objective of this assignment is to introduce you to the Hypertext Markup Language (HTML – specifically, HTML-5) document structure and a very limited amount of web page styling using Cascading Style Sheets (CSS). Specifically, inthisassignment,youwillcreatethe first two HTMLpages 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). You will also use a simple Web server that responds to requests via a URL in a browser for the HTML pages that you create (We will give you the server, and you will have to modify it just a bit) The first two pages of your website will be your weekly schedule of key events and an About Me page. Your weekly 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 a picture of yourself, information about yourself that you feel comfortable sharing, and an embedded widget (specifically, a YouTube Playlist) of your choice. Next, 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 6 pages. 2 Requirements Your weekly 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 class schedule this semester and regularly scheduled events you participate in each week during the semester. 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 “About me” page, on which you should embed 2 Picture of yourself accompanied by information about yourself you feel comfortable sharing, and a YouTube Playlist 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 Schedule of events and About me 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 About Me link is selected, the browser should display a page similar to the About Me page pictured in Figure 3 below. Figure 2: Web Page displayed when the hyperlink to the Breakfast Spot is selected (that is, clicked on) from the Saturday event in the My Weekly Schedule table pictured in Figure 1 above. 3 Figure 3: An example About Me page containing an img element with a src reference to a picture somewhere on the web that says something about you. You should use a full URL for the src (source) in your image element – for example: “https://cse.umn.edu/sites/cse.umn.edu/files/styles/folwell_full/public/Ch allou_Dan_1.jpg?itok=6tBEqjiB” The second item on the page is a YouTube Playlist. (You should find and embed playlist 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 YouTube Playlist, first find a YouTube 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 About Me page. 4 You should embed the HTML code for your Picture and YouTube playlist within their own appropriate HTML block element such as a table row, div, section, or

–

( see https://www.w3schools.com/html/html_blocks.asp ) on your Widgets page. You should use a table to display a picture of something related to information about and a list of information about yourself as shown in Figure 3. 3 Using and updating the server Along with this writeup, we have given you 2 files. One file, named: server.py contains the code for a simple Python server. The second file, named: 404.html, is an html page with a file not found error (404) used by the server (see the file: server.py) You are required to test your pages using the server. However, to do so, you will have to add some code to the function named: getFile in the file server.py to display your AboutMe.html page See the comments in the function getFile (in the file server.py) for details on the code you have to add so the file server.py can return the AboutMe.html page when it is running To test your web (that is, html) pages: 1) Ensure all html pages: MySchedule.html, AboutMe.html, and 404.html are in the same folder/directory on your computer (see naming conventions in section 5 below) 2) Put the file server.py in the same directory as your html pages. Make sure you have added the code specified in the comments in the getFile method (which is in the file server.py) 3) Edit the file server.py using Python’s Integrated Development and Learning Environment (IDLE) 4) Select the Run Module item (F5) – this will run the Python server 5) Now you should be able to use your browser to view your MySchedule.html and AboutMe.html pages. a. Enter: http://localhost:4131/AboutMe.html in your browser’s URL bar (that is, address bar), and your browser should display your AboutMe.html page (which should be your version of the page displayed in Figure 3 b. Enter: http://localhost:4131/MySchedule.html in your browser’s URL bar (that is, address bar), and your browser should display your AboutMe.html page (which should be your version of the page displayed in Figure 1 c. Enter: http://localhost:4131/JUNK and your browser should display a 404 error: File Not Found. 5 4 Evaluation Your submission will be graded on the following items (out of 75 possible points + 10 bonus points): • Weekly Schedule Page contains table with weekly schedule containing at least 7 events (one for each day of the week) is present and formed using a table element

. At least 3 of the events must have Physical Locations. 5 points • At least two events in the table should have links to a URL that displays information about the event when selected. 5 points • Navigation links are present at the top of each page, function correctly, and are contained in aor