XHTML: Introduction
From Academic Computing
Contents |
[edit] Purpose
An introduction to creating web pages using XHTML 1.0 to markup documents.
[edit] Prerequisites
Students should know what the following terms mean:
In addition, students should also understand the following concepts:
- Copy
- Move
- Paste
- File paths
- Case-sensitivity
Students should be familiar with a keyboard, have some basic computing skills (i.e. mousing), and have basic internet skills. If students wish to save their webpage while attending a class, they should bring a floppy disk or other portable storage device.
[edit] What is XHTML 1.0
XHTML is a markup language (released 26 January, 2000) used to create web pages. XHTML stands for eXtensible HyperText Markup Language. It’s a bridge between XML (eXtensible Markup Language) and HTML (HyperText Markup Language). It is part of a trend to make web pages accessible from non-traditional devices like digital televisions, cell phones, Personal Digital Assistants (PDAs) like Palm Pilots, automobiles, and refrigerators (yes, refrigerators).
People use XHTML to markup documents that they want to display on the World Wide Web by identifying the start and end of paragraphs, lists, headings, etc. It’s kind of like a word processor or proofreaders' marks for the web.
You can edit or create XHTML in any text editing program (such as Notepad, Wordpad), word processor (Word, WordPerfect), or HTML editing program (Dreamweaver, Frontpage, Composer).
[edit] Differences between HTML and XHTML
If you’ve ever used HTML, XHTML should be very easy—they only differ in four major ways. (For a complete list of differences, go to the W3.) Even if you’ve never used HTML, it’s still a good idea to be aware of the differences between the two if (and when) you decide to view a webpage’s source.
- Well-formed
- Properly Nested
- Lowercase
- Closed
[edit] How XHTML Works with the Web
After you create your webpage, you upload it to a computer running a server/host, otherwise you will be the only one to see it (or those you have over at your house looking at your computer).
While being hosted, anyone who knows the URI to the document you’ve uploaded will be able to view that document. If you’re working with XHTML (HTML), users will use a web browser to view the document. The web browser requests the file and then interprets how it should display the file based upon how you’ve marked up the document.
[edit] USF Web Page Policies
As a USF student, you are allocated storage space on USF server computers where you can store email and web pages. A lot of web pages can be stored within ten megabytes. USF’s web page policies can be found online at http://www.acomp.usf.edu/Help/www_publishing.html
[edit] XHTML Basics
Thus is XHTML written:
An element is a one word instruction that tells the browser what to do with the content. For example, if you wanted to indicate that “content” was a paragraph, you would do this:
<p>content (usually longer than a single word)</p>
You can substitute any valid element name for “p” or “element.” Take a look at Zvon.org or the W3 for a more complete list of elements.
You can expand the scope of the element by adding attribute/value pairs to the start tag.
<element attribute="value">content</element>
You can add as many attribute/value pairs as you'd like in the start tag, but do not include them in the end tag. The attributes only apply for that one instance of the element.
For example:
<a href="http://www.usf.edu">content</a>
or
<table border="0" cellpadding="1" cellspacing="4">…</table>
[edit] Required Elements
XHTML has three required elements: html, head, and body. You must have these three elements in the order presented to have a well-formed document.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<head>…</head>
The head element contains the META data of your page. Information, such as the title of the page, the author, a description, and keywords, goes into the header element. However, this information is not displayed in the browser window. Instead the information is used by spiders, bots, and other search agents to index your page and to determine search engine results.
The title element is found in the head element and contains the title of the document. Try to make the title as descriptive as possible as this is an element that is used in search engines placement and is used as the name of the document when it is bookmarked. This element will be displayed in the title bar of the browser window.
<body>…</body>
The body element contains the body of the document and will be displayed in your browser window. Most of your time will be spent modifying the content of the body.
[edit] Entering and Formatting Text
The basic element for entering text is the p (paragraph) element.
You can also use paragraph tags <p>…</p> to designate a block of text, putting an empty line space above and below. The code sample below that uses paragraph tags will have the same result as the code sample above that uses break tags:
<body> <p>This is the first sentence on my new web page.</p> <p>This is the second sentence.</p> </body>
<br />
The break tag does not have a normal closing tag. There is no </br>. The break tag is an opening and closing tag all in one, because there is no content associated with a break. There are a few other tags like this, but almost all have a separate opening and closing tag.
<p>…</p>
The paragraph tag designates a block of text as a paragraph. When used, a line space will be inserted above and below the paragraph.
[edit] Bulleted/Numbered Lists
If you would like to put a bulleted or numbered list on a hypertext document, there are tags to help. The ordered list <ol> tag will make a numbered list, while the unordered list <ul> tags will make a bulleted list. For example:
<ol> <li>Item One</li> <li>Item Two</li> </ol>
Put <ul> instead of <ol> and you will get a bulleted list. Each item within the list is enclosed within a set of list item <li> tags. You can make more complex lists (outlines) by nesting multiple sets of lists tags. You can make lists within lists. For example:
<ul> <li>Item One</li> <li>Item Two</li> <ul> <li>Item Two.One</li> <li>Item Two.Two</li> </ul> <li>Item Three</li> <li>Item Four</li> </ul>
[edit] Creating Links
Hyperlinks are a big part of the web. Hyperlinks are text and pictures that a web user can click on and be instantly carried to a new web page. You can make hyperlinks out of text or pictures. Whatever is between the set of anchor <a> tags will be turned into a hyperlink. For instance, if I am working on a page called index.html and I want visitors to click on the word "resume" and be sent to a web paged called resume.html, the following code should be used:
<a href="resume.html">Resume</a>
If I want a visitor to be transferred to another web site (collection of web pages), then I have to put a complete web address (url) as the value for the href attribute. For example, the following hyperlink will take a visitor to the USF web site when they click on the words "University of South Florida".
<a href="http://www.usf.edu">University of South Florida</a>
If I want a visitor to click on my name and have their email program automatically load up with my email address in the To: field, then I'd use this line of code:
<a href="mailto:myemail@domain.com">My Name</a>
A personal web site may contain just one page, or it could contain dozens of pages. The pages are all linked together with hyperlinks so that visitors can move to different pages.
[edit] Inserting Images
You can insert images onto you web page by using the <img> tag. To test the image tag, you will need to save an image to your computer to practice with. You can find images anywhere on the web, and the procedure for saving them to your computer is:
- Put your cursor over a picture on a web page.
- Right-click your mouse.
- Choose "save image as" from the menu.
- Select a location to save the image (the same location as your HTML document works best).
- Make a note of the image's file name and the extension—either .gif or .jpg
- Click "save"
Now that that is done, add the tag to insert an image into the body section of your web document:
<img src="imagename.gif" />
That's all there is to it. "img" stands for image, and "src" stands for source. There are eight other attributes you can use inside of the image tag to control a picture, but you'll have to check out the XHTML: Images workshop/handout for them.
[edit] Images as Links
You can make an image into a link the same way you make text into a link. Simply put your image tag between a set of anchor <a> tags. For example:
<a href="http://www.usf.edu"> <img src="usflogo.gif" /> </a>
[edit] Saving Your Hypertext Document
Before you can view your web page with a web browser, you'll need to save the hypertext document so that it accepts the changes you've made.
When you save, make sure that the file type is .txt text document. If you are using Notepad, .txt is the default and you won't have to change it. Give your document a name, making sure that you end it in .html. For example: mypage.html, index.html, resume.html, etc.
Notice that the filename examples above are all in lowercase. That is a good habit to get into if you aren't doing so already. If you use capitals or a combination of capitals and lowercase, you increase the chances of errors later when you make hyperlinks. Stick with lowercase 100% of the time and you'll never question yourself.
[edit] View Your Web Page with a Browser
Once you have saved your hypertext document to the hard drive or a floppy disk, you can open it up with a web browser to see how it looks. Working on a web page requires a lot of saving and viewing over and over again. These steps will soon become second nature to you.
[edit] Microsoft Internet Explorer
- Click File-Open (or press Ctrl-O) to start the Open dialog box.
- Click the "Browse" button.
- Click the "Look in:" drop-down menu for the directory you saved your .html file in.
- Locate the .html file and double-click on it.
- Click the "OK" button on the Open dialog box.
- Whenever you make a change to your hypertext code, you need to click the "Refresh" button to see the changes.
[edit] Netscape Navigator
- Click File-Open (or press Ctrl-O) to start the Open Page dialog box.
- Click the "Choose File" button.
- Click the "Look in:" drop-down menu for the directory you saved your .html file in.
- Locate the .html file and click-click on it.
- Click the "Open" button on the Open Page dialog box.
- Whenever you make a change to your hypertext code, you need to click the "Reload" button to see the changes.
[edit] Sample Web Page
The following XHTML document follows the standards recommended by the World Wide Web Consortium (WC3).
<html> <head> <title>My First Web Page</title> <meta name="description" content="description" /> <meta name="keywords" content="list, words, here" /> </head> <body bgcolor="#ffffff" text="#000066" link="#0000ff"> <h1 align="center">Welcome to My Page</h1> <p> My first web page really isn't taking that long to create. The Meta tags are for the search engines so others can find my page easily, but the page will work without them. </p> <p> To format the text I am typing, I can use any number of formatting tags. I can <b>bold</b> text, <i>italicize</i> text and change the color to <font color="#009900">green</font>. I'm using hexadecimal codes to get the colors I want.</p> <hr /> <p align="center"> If you have any questions about creating your own web site, email the trainers at Academic Computing @ </p> <div align="center"> <a href="mailto:actrainers@lists.acomp.usf.edu"> <font size="+2"> actrainers@lists.acomp.usf.edu </font> </a> </div> <hr /> </body> </html>
[edit] XHTML Resources
[edit] Follow Up Classes
- Introduces students to the markup used to insert and format images on a web page, and also explains the process for creating an image map.
- Introduces students to the markup used to create tables on a web page and use tables to control layout and design.
- A reference for using colors on the web.
- Introduces students to the steps involved for adding sound to a web page.
- Introduces students to the medthods for allowing a user to submit information to the web administrator via text boxes, buttons, checkboxes, drop-down menus, and scrolling lists.
