HTML Exercise
(Week 3, Tuesday 9/11)
In lecture I talked about key aspects of HTML and tahe document tree, including the metadata that goes into the head of the document, the separation of content and presentation, the use of semantic HTML tags, and the overall structure of HTML. In today's exercise, you'll put that knowledge into practice by marking up the text of a Wikipedia page.
Due: By start of class on Thursday, 9/13.
Part 1: Retrieving the Exercise Files
Make sure that you've cloned your igme230 repository to the computer that you're currently working on. Create a new folder in that repository for this exercise. (You can call it whatever you want, but I'm going to call mine week3a.) Download the three files that you'll need for this exercise into that directory by right clicking on each of the links below and choosing "save file as..."
- Abbreviated version of Wikipedia entry for Hotel La Bonte
- Photo of Hotel La Bonte
- Map of Hotel La Bonte
Stage and commit these files to the repository with the commit message "Initial starting files." Sync them to GitHub, and make sure that you can see the folder and files in your igme230 repository.
Part 2: Document Structure
Create a new HTML document--you can call it whatever you'd like, but I'm going to call mine week3.html. Add the HTML document structure. If you're using VS Code (or have installed Emmet for Brackets), you can use the html:5 abbreviation to insert the starting structure. (Type html:5 followed by Enter in VS Code, or by Tab in Emmet.)
The document must have the following things in the head:
- A meaningful title
- UTF-8 character set specified
(If you want to get fancy, you can add other meta tags--like name and content, or facebook open graph information.)
Part 3: Document Content
Now use HTML to mark up the content. Use the original Hotel LaBonte Wikipedia page as a guide, but don't try to use their markup.
Start by adding links to the images in the places indicated in the document. Then mark up the content, using HTML tags that repesent the content as well as possible. Don't do anything with the layout or design; we'll work on that on Thursday when we talk about CSS.
You should include:
- The two images, with appropriate alt text
- A level 1 heading and two level 2 headings
- A container tag of some kind to enclose the "info box" that includes the photos and basic facts
- A simple two-column table inside the info box to hold the text values
- An ordered list for the references
- An unordered list for the external links
- Links from the in-text footnotes to the appropriate reference, and from the reference back to the note.
Your finished page should look similar to this screenshot of my finished page.
