Site hosted by Angelfire.com: Build your free website today!

Creating Web Pages with XHTML

by: J.M.

Sweetwater High School


Home Page | Page 2 Link | Page 3 Link

What is XHTML

Html or Hypertext Markup Language, is the code or language that is used to create Web pages. HTML documents, also known as "Web pages", are used by browsers such as the Internet Explorer or Mozilla Firefox to present text and graphics.

XHTML, or Extensible Hypertext Markup Language, is a cleaner and stricter code of HTML.

Both HTML and XHTML use "tags" to markup the HTML document. These "tags" tell the browser to change the HTML document into a multimedia Web page.

Which Computer Programs Do You Need for Creating Web Pages?

  1. My Computer: create root folder and other sub-folders.
  2. NotePad: create HTML or "Web page" documents.
  3. Internet Browser: Mozilla Firefox or Internet Explorer. Use this to view Web pages.

Creating Web Pages Using XHTML

This section explains how to create a Web page by using the following tags.

Tags Function
Head Information about a page not displayed in browser
Title Appears on the title of the browser
Body Specifies what appears in the browser window
Paragraph: "p" Starts a paragraph
Line Break: "br/" Inserts a line
Horizontal Ruler: "hr/" A ruler that separates information on the page
Ordered List: "ol" Numbered List
Unordered List: "ul" Bulleted list
Link to other web pages: "a href="url" Hyper link to connect to other web sites.
Image: "img src="name of image" Insert a image.

Hyperlinks or "Links"

What makes the World Wide Web or "Web" so effective is the ability to define and add links from one page to another, and to follow links at the click of a button. A single click can take you right across the world.

First, let us link three major universities in San Diego county.

  1. University of California, San Diego
  2. San Diego State University
  3. University of San Diego

Inserting Images or Computer Graphics

Images can be used to make your Web pages look better and greatly help to get your message across. The simple way to add an image is using the "img src" tag.

What is difficult is telling the computer where the image is located. You have to tell the computer the Path.

Do the following steps in order to insert an image.

  1. Download or save an image in the correct location on your computer.
  2. When you save the file, only use lowercase letters and underscores for the file name.
  3. The location for saving your image files are in the root folder in folder named "images".
  4. In the HTML document, you have to type the correct path of where the image is located at.
  5. Use the tag "img src" to locate the image on the Web page in the document.


Creating an Inserting Table

Creating and inserting tables is an effective method of laying out your Web page. This allows you to place information anywhere you like on the Web page. You can better control where everything is placed.

Table Tags and Attributes

Tag Attribute Function: What does it do?
"table" Align Controls table alignment: Left, Center, Right.
Bgcolor Background color for table.
Border Defines width of table border.
Cellspacing Defines space between cells.
Cellpadding Defines space within cells.
Cols Defines number of columns
Width Sets table width relative to window width.
Table row: "tr" Align Horizontally aligns row: Left, Center, Right.
Bgcolor Background color for now.
Valign Vertically aligns row: Left, Center, Right.
Table cell: "td" Align Horizontally aligns row: Left, Center, Right.
Bgcolor Background color for cell.
colspan Merges (combines) two or more column cells.
rowspan Merges (combines) two or more row cells.
Valign Vertically aligns row: Left, Center, Right.

Table For Images

Red Devils

Cars

Mickey And Minnie


First Web Page Project

Web Site Designed by: J.M.

Sweetwater High School

Last modified: 10 August 2010