Allow plenty of time for this project. If you are new to creating web pages, you will probably need to review the basics of creating, editing, viewing, and uploading web pages from the previous project while you are working on this project. Many students find they need to proofread their code several times before it is error free. Allow time to proofread, practice and ask questions.
Please take advantage of the links provided for "Lecture notes." Since we are not using a text as a resource for these project, I have provided details in the form of "lecture notes." They should answer most of your questions. If you skip reading the lecture notes, you miss a great deal of information that will help you understand the project instructions. You should also be learning how to use the online resource at the W3Schools website. If you can't figure out how to do something using the project instructions, look for more information about it on the W3Schools website. Becoming familiar with how to use a reference is just as important as following the detailed instructions I have given to lead you through creating a page.
To be graded:
In the last project, you learned how to create a basic web page with common elements. You included a title tag in the head section of the page. In the body section of the page, you included a level 1 heading, level 2 heading and a paragraph. In this project, you will:
W3Schools is an excellent online resource for learning more about HTML/XHTML coding. Go to the links suggested below and explore the pages for HTML and XHTML that apply to the elements in this project. Check out the links to "examples" of code at this website. These pages give you an opportunity to type in code and try it out to see if it works. Practicing with HTML/XHTML code is the only way to really understand how it works.
Use the link to go to the W3Schools home page.
http://www.w3schools.com
On the W3Schools home page, click on the link to "Learn HTML."
Click on the link to "HTML Elements."
Click on the link to "XHTML Syntax."
Open Notepad and create a new blank web page.
Start the html/xhtml coding of the page by copying and pasting the following tags into your Notepad window for the file you created named practice-xhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text for Title Goes Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
</head>
<body>
</body>
</html>
DOCTYPE statement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Don't try to type in the DOCTYPE statement. It must be exactly as it is shown. Use a reliable source for the DOCTYPE statement and copy and paste the code to be sure it is correct. It is NOT HTML code and should NOT be all lowercase. The case should be done as it is shown here.
You can read more details about the DOCTYPE statement at the W3Schools website:
http://www.w3schools.com/xhtml/xhtml_dtd.asp
Adding the xmlns attribute to the starting html tag:
<html xmlns="http://www.w3.org/1999/xhtml">
You can read more details about the xmlns attribute at:
http://www.w3schools.com/tags/tag_html.asp
Adding a meta tag to declare the character set used:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
Notice that the meta tag is in the <head> </head> section of the code. This is information for the browser. It is important to include if you plan to use a validator to check your code. This is also a very difficult code to type in. Copy and paste this code to avoid typographical errors. It has two attributes:
Replace the text that is shown between the <title> </title> tags to include your full name.
Example:
<title>Ruthann Whobrey</title>
After the <body> tag, add the text: Student Information
Surround the text with the tags to make it a level 2 heading.
Add an attribute to the <h2> start tag to center the heading.
Add two paragraphs (using complete sentences) to tell me these things:
Start each item (student info, and restaurant) in a separate paragraph with the <p> tag. Remember to end each paragraph with a closing </p> tag.
Example:
<p>My favorite place to eat when someone else is paying the bill is the Great Impasta in downtown Champaign. I like just about everything on the menu, especially the desserts.</p>
After the "restaurant" paragraph:
Example:
<p>Your name
Street address
City, ST zip</p>
At this point, save the page and view it in the browser:
What you should discover when you view your file in the browser is that pressing the ENTER key in Notepad, does nothing to create a line break in your text when it is displayed in the browser. Because your text for the three lines is contained in one paragraph, they are all on the same line. You COULD make each line appear on its own line by creating three paragraphs. If you do this, however, you will also have blank lines between the lines. A paragraph in the browser always includes a blank line before it.
To make text go to the next line without creating a new paragraph, it is necessary to use a code. The code is the line break code: <br /> Whenever you want text to go the next line within the same paragraph, use the <br /> tag.
Return to Notepad and add line break tags in the code so it looks like:
Example:
<p>Your name <br />
Street address<br />
City, ST zip</p>
Save the file as: practice-xhtml.html
View and test your page in the browser.
To test your pages:
If your code does not work properly, you can edit the code in Notepad and save the file again. You will have to open Notepad to edit the file. With Notepad open:
You can view a "valid" example of code for this practice file. Use the link at the top of the page for checking your own code with the practice file Key.
Rewrite the following code, including the text, to be valid according to the rules for XHTML.
Open Notepad and create a new blank web page.
Start the html/xhtml coding of the page by copying and pasting the following structure tags into your Notepad window for the file you created named movies-xx.html (Change the xx in the filename to your initials):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text for Title Goes Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
</head>
<body>
</body>
</html>
Replace the text for the title tag. Type the text: My Favorite Movies.
After the <body> tag, type Favorite Movies. Surround the text with the tags
to make the text be an <h2> heading and add the align attribute within the
heading tag to
center the text of the heading on the page. On a new line after the h2 heading line, type
your name. Surround the text with the tags to make the text an <h3> heading and
add the align attribute within the heading tag to center the text of the heading
on the page.
Type text that says:
Three of my favorite movies are:
(Name of a movie)
(Name of a movie)
(Name of a movie)
All of the above text should be contained in the same paragraph. Use a starting <p> tag before the first line of text. Add a closing </p> tag at the end of the text.
Each movie should be on a separate line without any blank lines in between them. Use <br /> tags when you want to start a new line without starting a new paragraph, similar to what you did in the practice file.
Use a horizontal rule after the paragraph.
After the horizontal rule, add a new paragraph. In this paragraph, tell approximately how long you spent completing the project and mention anything that you got stuck on or had to troubleshoot to get it right. Tell if this project was easier, about the same or more difficult than the last project.
Be sure all the code for the elements that should display on the page is between the opening body tag and the closing body tag. The closing html tag should be the last tag on the page.
Edit if necessary and save again.
NOTE: When you are testing your pages by viewing them in the browser, you may get pop-up windows with Error messages asking if you want to "debug." Always answer NO to these pop-up boxes.
Validate your code to check for errors using the online validator provided by the W3C.
http://validator.w3.org/file-upload.html
Do not assume that your coding is "valid" just because the view of the page in the browser displays all of the elements properly. You will lose points if you have not followed the XHTML rules even if your page displays the content effectively in the browser. The importance of well-formed code becomes more obvious as we progress in the semester and add more to the pages.
I suggest validating the code BEFORE you upload it to your webspace at Geocities.
See link at the top of this page to "Using Validator" for more details.
Upload the movies-xx.html file to your webspace at Geocities.
Go to www.geocities.com, sign in, click on File Manager and use the Upload feature to upload your page to Geocities.
Send the short answers for the Lab and the URL of your movies-xx.html file to the instructor.
Your URL should be something like:
http://www.geocities.com/login/movies-xx.html
When you send the URL to me, send a copy of the email to yourself and test the link to be sure it works. You will lose points if I have to ask you to resend your URL.
Reminder: Send answers / URL to both of these email addresses: