CogSci 3 -- Assignment 1- XHTML - Part 1
Due Saturday, October 10th, 2009 (11:59pm!)

Note: if you can locate a copy of The Web Wizard's Guide to XHTML, Cheryl M. Hughes you should read chapters 1 and 2. We are going to try to give a synopsis in lecture.

Goals

How to create a Web page

Learn the structure of an XHTML document.
Programming editors - use the smart text editor: Notepad++
Edit and modify your Web page using the Notepad++ editor or the Notepad editor.
The UCSD computer labs have Notepad+ which works very well for XHTML files

Understand the three type of XHTML lists by first writing a brief description of the element and then by using it in an example.
1. Use an ordered list <ol> ... </ol>
2. Use unordered lists <ul> ... </ul>
3. Use definition lists <dl> ... </dl>

The assignment will be graded by viewing your final web pages and by viewing the XHTML "source" for them.
The content of this work is creative while the structure of the page should follow the directions in this assignment.

(the PCs in Solis 105 have Notepad++)--- However, if you don't have Notepad++ on your machine, you can get it here.

Note: if you wish to use a home PC or Macintosh, you should use Firefox, or Mozilla to view your work, as we will use these to grade. (They all render pages with the same engine.) If you elect to use Internet Explorer instead of these recommended browsers, you do so at your own risk since it has a tendency to display HTML differently).

Basic XHTML Elements/Tags

Element/Tag Meaning

<html> ... </html> Begin and end an XHTML document

<title> ... </title> Document title; the title that shows up in the title bar of the browser window, not on the web page itself! For a "title" on your web page, use one of the <Hx> tags.

<body>
...
</body> Body of a document; this is where your "message" goes. There should be only one <body> ... </body> pair on your web page!

Bold, Italic, and Spacing

<b> ... </b> Bold text

<i> ... </i> Italic text
<u> ... </u> underline some text (You won't use this in any of the assignments).

<div> ... </div> Divides the content into different sections, that have different names or characteristics, for instance ...

<div align="center"> ... </div> Center text and images

<br /> Break. End the current line; the next line of text starts at the left margin on the line beneath this one. There is no </br> tag. <br /> is an empty element as it doesn't describe or modify content. The closing " /" is required for empty elements.

<p> blah blah blaa </p> Paragraph separator; like <br /> but adds a blank line of vertical space.

<hr /> Horizontal rule (line); put a horizontal line across the page; <hr /> is also an empty element there is no </hr>

Section Headings

Tags Meaning

<h1> ... </h1> Largest heading (<h1>)
Headings come in different sizes, but are always bold. There is some vertical space (ala <p>) following the closing </hn> tag. You can use the <div> tag if you want your heading centered.

<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6> Next largest heading (<h2>)
through

Smallest heading (<h6>)

Basic XHTML Elements/Tags
Element/Tag	Meaning
<html> ... </html>	Begin and end an XHTML document
<title> ... </title>	Document title; the title that shows up in the title bar of the browser window, not on the web page itself! For a "title" on your web page, use one of the <Hx> tags.
<body> ... </body>	Body of a document; this is where your "message" goes. There should be only one <body> ... </body> pair on your web page!

Bold, Italic, and Spacing
<b> ... </b>	Bold text
<i> ... </i>	Italic text
<u> ... </u>	underline some text (You won't use this in any of the assignments).
<div> ... </div>	Divides the content into different sections, that have different names or characteristics, for instance ...
<div align="center"> ... </div>	Center text and images
<br />	Break. End the current line; the next line of text starts at the left margin on the line beneath this one. There is no </br> tag. <br /> is an empty element as it doesn't describe or modify content. The closing " /" is required for empty elements.
<p> blah blah blaa </p>	Paragraph separator; like <br /> but adds a blank line of vertical space.
<hr />	Horizontal rule (line); put a horizontal line across the page; <hr /> is also an empty element there is no </hr>

Section Headings
Tags	Meaning
<h1> ... </h1>	Largest heading (<h1>) Headings come in different sizes, but are always bold. There is some vertical space (ala <p>) following the closing </hn> tag. You can use the <div> tag if you want your heading centered.
<h2> ... </h2> <h3> ... </h3> <h4> ... </h4> <h5> ... </h5> <h6> ... </h6>	Next largest heading (<h2>) through Smallest heading (<h6>)

Reviewing the different types of lists:

Lists
Tags	Meaning	Looks like
Not in the list <ul> <li> Item 1 </li> <li> Item 2 </li> </ul> Not in the list	Create an unordered list; each list item is marked with a <li>; each list item will appear on a new line marked with a bullet (solid circle character). Note: it's <li> El-eye, not El-one!	Not in the list Item 1 Item 2 Not in the list
<ol> <li> Item 1 </li> <li> Item 2 </li> </ol> Not in the list	Create an ordered list; each list item is marked with a <li>; each list item will appear on a new line marked with a number The <ol> tag can take a type attribute which will change the list from numbered to: a, A, I, i; E.g., <ol type="a">.	Not in the list Item 1 Item 2 Not in the list
<dl> <dt> Word 1 </dt> <dd> Definition 1 </dd> <dt> Word 2 </dt> <dd> Definition 2 </dd> </dl>	Create a definition list; each list item is marked with a <dt>, followed by a <dd> which preceeds the definition for the word or phrase marked with the <dt> tag. The text of the <dd> definition is indented to the right slightly	Word 1 Definition 1 Word 2 Definition 2

Now you are ready to create your own web page document.

Without doubt, one of the best ways to learn Web programming is to create all your first documents using nothing but a simple text editor, like Notepad++. By hand-coding your first generation of documents using a basic text editor, you can really get a feel for the syntax of the language and the core components that make it up. It is proven that learning is maximized by writing down the subject that you are learning, so using an application to take care of all the fundamental aspects of your documents, such as structure and definition tags, kind of defeats the object.

We know that there are many programs like FrontPage and DreamWeaver, or Amaya an open source XHTML editor, that will generate HTML pages for you. In fact, current versions of Microsoft Word will save pages in HTML format. Using one of these tools is not what this assignment is about. Instead, it's about learning how the individuals XHTML tags work, and how to place them in your text to get the desired affect(s). So we ask that you create your home page "by hand".

But when you’re feeling a little more confident, you may begin to tire of typing out the same old tags, document after document after document. You’ll begin to find that using your plain old text editor is now boring you and slowing you down.. Of course, some people never tire of the simplicity and power of the humble text editor, and this is fine, but for those of you that want to focus on content, you may find a dedicated "what you see is what you get" (WYSIWYG) editor just the tool you’re looking for.

The editor we will describe is called Notepad++.

Get the favorites-outline.html template file and open it using Notepad++

Use Start->All Programs->Accessories->Notepad++ to start up Notepad++.

Then save a copy of favorites-outline.html in your hw1 folder.

(note, the images below are shown using WordPad)
To work with your file, select it; then right click and select "Open with..."-> Notepad++

Working with XHTML

Now that you have a simple outline page, we want you to customize it and fix it using Notepad++. You'll need to add tags, links, and text.

Important:

Each time you make a change to favorites-outline.html, you need to File->Save your file.
In order to see the changes in Firefox, you need to Reload the document using Reload in the View Menu, Ctrl+R, or clicking the Reload button on the tool bar.

You will be in a cycle of:

Use Notepad++ to edit or make a change
Then, File->Save
In Firefox, reload (Ctrl+R) Firefox to verify the change has the desired effect by comparing with the sample below
Go back to step 1

Work slowly, just change one thing or add one new thing per edit/reload cycle. It will make debugging your work (fixing problems) easier.

Modifying the document

Here is a brief description of how to change things. Refer to the sample at the bottom of the page, to make sure your page looks as much like it as possible. Make sure to use <br> and <p> where appropriate; remember they do different things with vertical spacing.

In the description, we refer to "normal text". This is simply text with no tags surrounding it!

Change the title (in the title bar of the Firefox window) to "A Few of My Favorite Things - COGS3 Assignment XHTML- Part 1 - cg3fzz". But use your account, of course.
use the paragraph element (<p> ... </p>) to complete the section on your philosophy of life with a line brake (<br />) tag to give you a new line.

For the next paragraph, Google for a definition of XHTML ordered lists and summarize it.
Put in your favorite movies using the ordered list element.

For the next paragraph, similarly provide a definition of unordered list.
List your favorite colors using the unordered list element.

For the last paragraph, provide a definition of definition lists .
List your favorite novels using the definition list element.

When you have done all of those steps, compare your document with the sample image below.

Saving your file in NOTEPAD++ (these images are using WordPad --- using NOTEPAD++ is much, much better!!)

If there are problems, switch back to your Notepad++ window, and put in your corrections; then Save the file, and Reload in Firefox. Remember to work slowly and change only one thing at a time.

Once you are done with your cg3f__-favorites.html file, make sure you have saved your file in Notepad++.

Validate your code

Even though your web page may appear correctly on your browser, your xHTML code may still contain errors, which your browser is very "forgiving" to. The World Wide Web Consortium (W3C), which is the organization that sets the standards for HTML and other languages used in the web, provides an online tool that checks if a HTML web page follows these standards. Once you have completed your work, you should check that your code is correct. Here's how to go through this step:

Open the online validator web page.
Upload your cg3f__-favorites.html file for validation.
Once you've uploaded the file, there are two possibilities:
- If your file passes the validation, you're done!!! Just follow the instructions on the W3C web site and add the xHTML valid image on your web page.
- Otherwise, check the error report and go back and correct the errors. Then, go back to Step 1 and re-validate your web page.

The "Turn in" folder: `hw1`

Once you are satisfied with your page, and you are working in one of the ACS labs, you are done (since you have been saving your work in your hw1 folder in your "Class Resources").

If you want to check your work, close all the programs. Then start Firefox again, and use File->Open Page to navigate to the hw1 folder in your "cg3f home directory" in the "Class Resources". Then open cg3f__-favorites.html. (If you just double click on cg3f__-favorites.html it may open in Internet Explorer instead of Firefox, but that's probably fine for just verifying your work.)

How We Will Grade

You will be graded on having your favorites page, with the correct XHTML.

We are going to grade using browser equivalent to the Firefox browser that is available in ACS labs. If you used Internet Explorer to preview your work, consider double checking your work with a recommended browser. i.e. (Firefox or Mozilla).
Your page should look as much like the sample as possible.
Be very careful about vertical spacing. We're very picky. Incorrect vertical spacing may mean you have used the wrong tags!
Stacking tags may also cause extra and unwanted vertical space.
We will look at your XHTML code
- To make sure that you haven't cheated and used a web-editing tool/product.
- And to make sure that your XHTML is readable (structured) and reasonable (and doesn't "work by accident").

CogSci 3 -- Assignment 1- XHTML - Part 1 Due Saturday, October 10th, 2009 (11:59pm!)

Goals

(the PCs in Solis 105 have Notepad++)--- However, if you don't have Notepad++ on your machine, you can get it here.

Basic XHTML Elements/Tags

Bold, Italic, and Spacing

Section Headings