Assignment 3 — Building Web Pages

The assignment this week describes how to use a combination of block and inline elements to build out the content of a web page.

Before you begin to create your web page, you might want to sketch out what it might appear like on a piece of page. Doing allows you to block out the major pieces of information. To construct your web page, you'll use the following block tags to layout and organize your page.

• <p> - Allows you identify paragraphs.
• <ol> -- Allows you to create a numbered (or ordered) list.
• <ul> -- Allows you to create a bulleted (or unordered) list
• <blockquote> -- Allows you to identify a block of information as a quote.

A block element stands on its own line, with space and above and below the element.

Additional elements, called inline elements, allow you to markup the content within a block element by nesting the element. Examples of inline elements include:

• <strong> - Allows you strongly emphasize a word (by default, formatted in bold).
• <em> - Allows you emphasize a word (by default, formatted in italics).
• <q> - Allows you to quote some text within a larger block of information.

For example, you could highlight an important term as follows:

<p>A <em>relative</em> path allows you to specify the <strong>path</strong> to a file in another folder.</p>

The browser would display this as:
     A relative path allows you to specify the path to a file in another folder

You can also use the <br> element when you want to insert a blank line within your document.

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

HTML elements:

Tasks:

1. Read and complete the exercises from Chapter 3 of the Head First HTML and CSS book.
2. Create a folder named Chapter3.
3. In the Chapter3 folder, create your customized versions of the following files:
   • Journal.html
   • At least two images (in an image folder within the Chapter 3 folder)
4. Zip your Chapter3 folder and name the file yourName_chapter3.zip.
5. Submit the zipped file through the associated Assignment page in Blackboard.

Your assignment should demonstrate:

• Creating a single page,
• Revising the content (text and images) in the html files to be your own content, instead of that provided by the book.
• Using the <img> element to insert at least two images.
• Using the <h1> and <h2> elements to create headings.
• Using the <blockquote> element to create a quote that is in its own paragraph.
• Using the <q> element to highlight a quote within an sentence.
• Using the <br> elements to create line breaks.
• Using the <p> element to contain content.
• Using the <em> element to emphasize text.
• Using the <ol> and <li> elements to create a numbered list.
• Using the <ul> and <li> elements to create a bulleted list.

By Wednesday, 10/12

Example assignment:

Chapter 3 example