CS 1100: Web Development: Client-Side Coding

Set Up Your Files

1. Create a folder named hw04 in the folder where you keep your CS 1100 work.
2. Copy these files from Homework 3 into your hw04 folder:
   • index.html
   • program.html
   • the image(s) you used in those pages
   Do not copy any style sheet you may have created for that assignment.
3. Use VS Code to create an empty file in hw04 named style.css.
4. Add a link to this file to the head element in both index.html and program.html:
   <link rel="stylesheet" href="style.css" type="text/css">
5. Make a copy of program.html in hw04 folder named schedule.html.
6. Change the contents of the title element in schedule.html to something appropriate, such as "Event Schedule".
7. Delete the main content of the schedule.html.
   Do not delete the nav bar at the top.

Update the Navigation Menu

The navigation bar consists of two links in a nav element. A website menu is a list of destinations, so let's make yours a list. Do the next steps in schedule.html.

1. Wrap your two links in a ul element, making it an unordered list. Make sure the element is still wrapped in the nav element.
2. Add a new item to your list: "schedule", with a link to schedule.html.
3. Make sure all three links work and open the desired pages.
4. Make sure the navigation menu uses relative links, with all three HTML files in the same folder. This means that each link will have just the filename as the value of the href attribute. For example:
   • This is correct:
     <a href="index.html"> or <a href="committee.html">.
   • This is incorrect, because it will work only on your computer:
     <a href="C:\Users\my_name\My Documents\homework\index.html">
5. Validate the HTML in schedule.html using the W3C HTML validator. Fix any errors and revalidate.
6. Copy the new navigation menu to the index.html and program.html pages. Make sure to check the links work in both files.

Now all of your pages have the same menu, making all pages accessible from any page.

Add a Schedule

Your schedule.html page is empty at this point, except for the standard template and a navaigation bar. Let's add a schedule.

1. Create a schedule with columns for Monday through Friday and rows for morning, afternoon, and evening. With styling, it might look like this:
   
   To implement this table, you need to use at least these tags: table, tr, td, and th.
   Don't worry about how the table looks right now. We will add styles in the next step.
2. Add content of your choice to each cell. That can be a simple as a single word. You may change the header row and the times of day if you like. The content is completely up to you.
3. Validate the HTML in schedule.html again using the W3C HTML validator. Fix any errors and revalidate.

Create a Style Sheet for the Website

Now let's add CSS rules to style.css to style the content in your HTML files.

If you created a style sheet for these pages for Homework 3, create a brand new style sheet for Homework 4. CSS allows us to present the same content in completely different ways. You can make your pages look different than they did before.

It's up to you what you style and how; this is your first styling homework, so let's keep the specification loose. Here are the minimum requirements:

1. To style the pre-existing text and images:
   • Use each of the following selectors at least once:
     • select by element — when you want to style every element of a type, such as all paragraphs
     • select by class — when you want to select all elements that have a particular class attribute, regardless of type
     • select by ID: when you want to select a unique element having a specific id attribute
   • You must style the following properties at least once each:
     • color
     • background-color
     • font-size
     • font-weight
     • font-family
     Feel free to style other properties, too!
   • If an image is too large, style the width or height properties for it. You can also add a border or give the image a larger margin for more whitespace on the page.
2. Make the navigation menu display horizontally. To do that, use one of these:
   • li { display: inline-block; } — a list without bullets
   • li { float: left; } — a list with bullets
   You will probably want to add some margin to the right of each li element, perhaps using one of these:
   • li { margin: 0 10px; } — margin on right and left
   • li { margin-right: 20px; } — margin only on right
   You may add other styling to the menu if you'd like, including to the links themselves.
3. Style the table to look attractive to the viewer. You might start with something as simple as this:

   table {
     bordercollapse: collapse;
   }
   
   td, th {
     border: 1px solid black;
   }
   

   ... and then add color, padding (or margins), and other features to the table cells. With styling, it might look something like this:
   
   Don't forget to add content to the cells...
4. Validate your CSS using the W3C CSS validator. This link allows you to upload your style.css file by selecting it using a file selector.
   Fix any errors, then revalidate the file. (Remember, you'll have to upload the updated file again each time). Repeat until you have no errors.