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.
- All XHTML tags must be lowercase.
- 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.
- All values must be in quotes unlike some values in HTML which would work either way.
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 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.
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.
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.
To bold text, use the <B> and </B> tags around the text you wish to bold.
To italicize text, use the <I> and </I> tags around the text you wish to italicize.
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.
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.
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.
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.
Centering the text is done by putting the <center> and </center> tags at the beginning and end of the text you wish to center.
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.
- type="1" for numbers
- type="A" for uppercase letters
- type="a" for lowercase letters
- type="I" for uppercase roman
- type=""i" for lowercase roman
- List Item
- List Item
Unordered listAn 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.
- type="square" (as in this list item) for square bullets
- type="circle" (as in this list item) for circle bullets
- type=disc, or just <li> for solid bullets (the default, as in this list item)
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|
- Changing the font color in a table is done by placing the <font> and </font> tags around the cell contents between the <td> and </td> tags.
- You can change the spacing in your tables by placing the <center> and </center> tags before and after the table to center the entire table.
- Changing the spacing an entire row can be done by using <tr align=center> (or left, or right) or valign for vertical alignment
- Sizing your table is done by entering <table width="%"> or <table width="800"> (800 pixels wide)
- Cellspacing and cellpadding attributes can be added to the <table> tag to change the spacing within a table cell. Cell spacing will change the aount of space between table cells. Cellpadding will change the space around the text (or whatever) you have in the cell and the edges of the cell itself.
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.