Assignment 2 — Understanding Linking and File Organization

The assignment for this week illustrates the use of <a> element to create navigation between web pages, how to insert images using the <img> element, and provides information about how to organize the content and files within your website.

You navigate from one page to another in a website via hyperlinks. You create hyperlinks in your HTML content by using the <a> tag.

<a href=”somefile.html”>The  text for the link</a>

The href attribute identifies the file to open when the link is clicked. The content between the starting tag and ending tag is used as the text for the link that you click to open the new page. Note that you include quotes around the name of the file.

If the file that you are linking to is not in the same folder as the file in which you are creating the link, you must identify the path to that file.

<a href=”../anotherfolder/somefile.html”>The  text for the link</a>

The path to the other file is also called a relative path. When you create a more complex website, you typically will want to organize your content into multiple folders. Relative paths allow you to navigate to and access a file within another folder.

You will also specify a path when want to insert an image within your web page. To insert an image, you use the <img> tag.

<img src="somefile.jpg"/>
<img src="../anotherfolder/somefile.jpg"/>

The src attribute indicates the image file that you want to use and the path to navigate to that image. Note that the <img> tag is an empty element. It has no content between its starting tag and ending tag, so you can include the / symbol at the starting tag to indicate its end.

For more information, see Chapter 2 of the Head First HTML and CSS book.

HTML elements:

Tasks:

1. Read and complete the exercises from Chapter 2 of the Head First HTML and CSS book.
2. Create a folder named Chapter2.
3. In the Chapter2 folder, create your customized versions of the following files:
   • lounge.html
   • directions.html
   • elixir.html
   • minimum of five images
4. Ensure that all of your links work correctly and display the file when clicked.
5. Zip your Chapter2 folder and name the file yourName_chapter2.zip.
6. Submit the zipped file in the Assignments section of Blackboard.

Your assignment should demonstrate:

• Creating one main page and two supporting pages.
• Revising the content (text and images) in the html files to be your own content, instead of that provided by the book.
• Using the <a> element to link from the main page to each of the supporting pages.
• Using the <a> element to link the supporting pages back the main page.
• Using the <img> element to insert a minimum of five different .jpg, .gif, or .png images.
• Using the <h1> and <h2> elements to create headings.
• Organizing files into separate folders based on contents (for example, all images are in one folder).

By 10/9

Note: Assignment 3 is also due this week.

Example assignment:

Chapter 2 example