XHTML & CSS Help - Title Graphic

XHTML Scripting

Quick Jump: How-To / Code Examples | Links | Font | Text Styles | Spacing Issues | Tables | Images

How-To / Code Examples

First, every web page has 4 tags (and their corresponding closing tags) in common. HTML, HEAD, TITLE, and BODY. These tags make up the basic framework of most websites and are used in the following order.

Most tags are placed between the <body> and </body> tags. The <body> tag is where you make changes to the background of your website. The <title> </title> tag displays the title of the page at the top of the browser window. The title for this site is XHTML & CSS Help - XHTML Help.

Differences in XHTML from HTML

If you are familiar with standard HTML there are a few subtle differences in XHTML code.

  1. All XHTML tags must be lowercase.
  2. All tags require a closing tag. ** This includes tags you did not have to close using HTML. This includes tags such as the <li> the list item tag, the <img> image tag, and <br> break tag.
  3. All values must be in quotes unlike some values in HTML which would work either way.
** The exception to the closing tag rule is that a few tags are self-contained and do not have a separate closing tag. This is not to say they don't close. They are written with a closing / at the end of the tag. Note the space required before the slash /> when closing self-contained tags.

This more exacting standard for XHTML allows for a wider range of accessibility and compatibility for mobile devices. It is also said to help in speeding up the load time of pages.

Links

Links are placed in a webpage using the anchor or <a href="url"> and </a> tag. Place the text or graphic you want to make into a link between the <a href="url"> and </a> tags.

Either text or images can be made into links. I have described how to make an image a link in the Images section below.

Images may be used as links by placing the <img src="imagename.jpg"> tag between the <a href="url"> and </a> tags where you would normally place text. Adding border="0" to the img tag will remove the default border from the image.

Font

Font color

Changing the font color is done by inserting hexadecimal code such as <font color="#fffff"> or <font color="black"> around the text you want to change.

There is a limited number of colors you can refer to by name. Also, some colors will not be recognized in this manner by all browsers. Using the hexadecimal code is recommended.

I would reccomend that you never, or very rarely use, the standard blue color for text since this is the default color for links. Users may mistake this text for a link and become frustrated when the "link" doesn't work.

Font size

Changing the font size is done by inserting <size="6"> attribute into the font tag. Yoy may either use, a value from -1 to +6 or use pt size.

Text Styles

Bold

To bold text, use the <B> and </B> tags around the text you wish to bold.

Italics

To italicize text, use the <I> and </I> tags around the text you wish to italicize.

Underline

To underline text, use the <u> and </u> tags around the text you wish to underline.
**I reccommend using this tag sparingly to avoid confusion with text which is not a hyperlink (link) being mistaken as a hyperlink.

Spacing Issues

Horizontal Rule

To place a line, or rule on the page, use the <hr> tag. The horizontal rule can be changed in thickness and width by inserting width=# or height=# into the tag. Inserting hr=noshade will create a solid black rule.

Paragraph

To define a paragraph, use the <p> and </p> tags around the text you wish to define.
NOTE: The default behavior for the paragraph tag includes a space before and after the paragraph text.

Break

To end a line and start text on the next line, use the <br> before the text you want the break in or at the end of the preceeding text. The closing tag for a break looks like this: <br />. You may also use the closing tag alone as a shortcut.

Center

Centering the text is done by putting the <center> and </center> tags at the beginning and end of the text you wish to center.

Ordered Lists

The ordered list is a list with numbers before each line of text. The code automatically puts the number in for you. The <ol> and </ol> tags are placed at the beginning and end of the list. Inbetween these tags are the <li> tags, or list items. When using lists in a style sheet, use a </li> tag for each list item. It is unnecessary in HTML. Each list item is a number in your list. The numbers can be changed by adding these type attributes.

You may change the numbering for the entire list within the <ol> or in the individiual list item tags <li> for each individual list item. The tag for the following list is <ol type="A">.
  1. List Item
  2. List Item

Unordered list

An unordered list is a standard list with bullets before each line of text. The code automatically puts the bullet in for you. The <ul> and </ul> tags are placed at the beginning and end of the list. Inbetween these tags are the <li> tags, or list items. When using lists in a style sheet, use a </li> tag for each list item. It is unnecessary in HTML. Each list item is a bullet in your list. The bullets can be changed by adding these type attributes. You may change the bullets for the entire list within the <ol> tag or in the individiual list item tags <li> for each individual list item as in the list above.

Tables

Tables are made up of three basic tags and their closing tags. These tags are the:

The <table> and </table> tags are placed at the beginning and end of a table. Tables are made up of columns and rows. The <tr> </tr> tags represent the rows and the <td> </td> represent the columns.

A border of 1 has been added to the code below so you can better see each section of the table.

The code for a 2 column 3 row table looks like this:

Which will display like this:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

Table Tips

Images

Images are placed in a webpage using the <img src="imagename" /> tag. In XHTML the img tag is a self-enclosed tag meaning it does not have a separate closing tag, but uses a space followed by a closing / to close the tag.

You can specify the size of an image by entering the height="#px" and width="#px" attributes into the IMG tag. #px being the pixel size of the image. I reccommend doing this to speed the loading of your webpage. (More can be found on this on the Graphics page.)

Place the alt="text" attribute in your IMG tag with a description of or the name of the graphic (text). Use double quotes. This will display the text entered in the space for the graphic while it loads. Also, for users using assistive technology, this will allow the program to read the text and tell the user what is there on the website.

The align attribute is no longer a widely accepted attribute for the img tag. The new standard is to use CSS styles.

Images may be used as links by placing the <img src="imagename" /> tag between the <a href="url"> and </a> tags where you would normally place text.

More information on images can be found on the Graphics page.