1. Preparing to work:

Open Notepad, this website, the w3schools website and your web design folder, and keep these all open for the duration of each class while you are learning xhtml. You will be writing the xhtml code in Notepad.

2. Saving your work:

In order to see the xhtml code as a web page, you must save all xhtml work with a .html file extension. Save all of your work to your share drive.

3. Viewing your work:

To view your html work as a web page, open My Computer and browse to your folder in the H drive, Double click your page.

4. Refresh the web page:

Remember to save any changes you make to the file before trying to view them. Refresh the web page before viewing any new changes.

5. How to use the online tutorial website, W3Schools:

Read the content of the assigned sections of the HTML tutorial, study the examples and practice using the tags.

6. Read the sections called html introduction and html elements:

Learn and understand the following terms and how they apply to html:

Elements: What are they?

Tags: What are tags and how does one work with them in html?

Attributes: How are attributes written? Where are they written?

Values: What are they, what do they do in html and how are they written?

7. Creating a basic xhtml web page:

Every web page needs a similar foundation structure. They all have a DOCTYPE declaration to open it followed by the opening <html> tag, the opening and closing <head> tags, the opening and closing <body> tags and the closing </html > tag. As you learned in the online tutorial, you will be writing your xhtml code in the program called Notepad.

Now we will create a page template with all of the necessary xhtml tags so you can begin each assignment with the correct foundation code.

Open Notepad and save the file as xhtmlTemplate in your H:\ xhtml web folder

Begin each web page with a DOCTYPE declaration to declare what type of xhtml you are using.

Type this code and always make sure the doctype declaration is the first piece of information in the xhtml code.

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"/>

You can copy and paste this into the assignments.

Follow the xhtml standards when writing xhtml code

8. Study these examples in the Basic Html Tags tutorial and practice using them to learn them.

More paragraphs:

This example demonstrates some of the default behaviors of paragraph elements.

Line breaks:

This example demonstrates the use of line breaks in an HTML document.

Poem problems

This example demonstrates some problems with HTML formatting.

Headings

This example demonstrates the tags that display headings in an HTML document.

Horizontal rule

This example demonstrates how to insert a horizontal rule.

Hidden comments

This example demonstrates how to insert a hidden comment in the HTML source code.

9. ASSIGNMENT 1

Learn these basic xhtml tags and attributes and submit an xhtml document that uses them. Create some organizational/layout structure using different headings on the page.

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title >
<body>
<h1> to <h6> Use all six heading tags
<p>
<br />
<hr />
<!--hidden comments-->

10. Html Text Formatting:

Study internal cascading styles and learn how to use these internal style properties to style text and font.

·  background color

·  text color

·  text align

·  Font-family

·  font-weight

·  font-style

11. ASSIGNMENT 2

Create some organizational/layout structure using different headings on the page. Use the internal style properties listed in #10 and some heading tags from #9 in an xhtml document and submit that.

12. Frequently Asked Questions

Q: After I have edited an XHTML file, I cannot view the result in my browser, why?
A: Make sure that you have saved the file with a proper name and extension like "mypage.html". Also make sure that you use the same name when you open the file in your browser

Q: I have tried to edit an XHTML file but the changes don't show in the browser. Why?
A: The browser caches your pages so it doesn't have to read the same page twice. When you have changed a page, the browser doesn't know that. Use the browsers refresh/reload button to force the browser to read the edited page.

13. Basic Notes - Useful Tips

When you write XHTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

XHTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In XHTML a new line counts as one space.

Using empty paragraphs to insert blank lines is a bad habit. Use the <br /> tag instead. (But don't use the br tag to create lists. Wait until you have learned about XHTML lists.)

XHTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. We use a horizontal rule (the <hr /> tag), to separate the sections in our tutorials.