CS 1100: Web Development: Client-Side Coding

Set Up

Create a folder named hw03.
If you have a folder where you keep your CS 1100 work (strongly recommended!), place hw03 there. If not, place it wherever you store your work files.

Pick any topic of your choice.
Now imagine you are hosting a convention, camp, or similar event on this topic. It can be anything! For example:

• a gathering for hobbyists of a particular sort
• a con for a movie genre or franchise you like
• a sporting event
• a gaming tournament
• a graphic design exhibit
• an academic conference in your professional field

... any group event will do. It could even be an entirely imaginary event, say, the Annual Meeting of the Tardis Owners Club of Iowa.

Create the Home Page

1. Use VS Code to create a file inside hw03 named index.html.
   Copy into your new file the standard HTML from the template file we have been using the last two weeks.
   (To download that file, control-click on the link and choose one of the "Download Linked File" options.)
   Change the title to the name of your event.
2. Add the following content to your page in whatever order you think makes sense:
   • the name of the event
   • the name of the hosting organization
   • the location of the event and how to get there
   • the venue: the meeting facility and the lodging
   • a short description of the event
   This can all be fictitious, of course. You don't have to write perfect text... Keep it simple, and keep it fun! You can even use the Lorem Ipsum generator to produce filler text if you'd like.
3. Use HTML elements to mark the structure of the document and its content. The structure includes things like a header, a main section, various sub-sections, and a footer. The content includes things like paragraphs, different levels of heading, text with emphasis, lists, and so on.
4. Add three more items to your page:
   • a table that shows various deadline for applying to attend, paying the registration fee, reserving a room, etc. Two data rows are enough for the purposes of this assignment, plus a header row. Use the time attribute on your dates (and times, if there are any).
   • an image that illustrates your event. You can search for open images on Wikipedia, or Google, or your favorite search engine. Be sure:
     • that you have the right to use the image,
     • that you credit the creator and source,
     • that you define alt text for the image!
     Put the image in a folder named images within your hw03 folder.
     The src string for the image should use a local reference: src="images/name_of_image.ext".
   • a nav bar at the top of your file with two links:
     1. to this file (link to index.html)
     2. to the program page (link to program.html)
     We will create program.html in the next step.
   This can all be fictitious, too. Don't stress over the content. The goal here is to practice with HTML.
5. Validate your HTML using the W3C validator at https://validator.w3.org/#validate_by_upload
   This link allows you to upload your index.html 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 or warnings.

Feel free to use more than one image on this page, if you'd like.
Feel free to use other HTML elements that you have learned in class, through the readings, or through your own study.

Create a Short Supporting Page

1. Use VS Code to make a copy of index.html inside the hw03 folder named program.html.
2. Make the following changes to program.html:
   • Change the contents of the title element to something appropriate.
   • Replace the main content of the page with information about the program for your event. This can be as simple as a short list of sessions and times, or a short list of keynote speakers. Feel free to improvise! Your page can match the kind of event you are running.
   • Add whatever tags you think are appropriate. This is a simple file, so feel free to keep it simple.
   Do not delete the nav bar at the top. It will look and work the same in both files.
3. Validate the HTML in the new file using the W3C validator as you did in Step 5 above. Fix mistakes and revalidate the file until it contains no errors or errors.

Feel free to use an image on this page as well, or even more than one!
Feel free to use other HTML elements that you have learned in class, through the readings, or through your own study.