Susan Jacobson (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} susanjacobson) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} jou3601,@ 2008-04-02 07:24:00 |
|
XHTML Basics
XHTML and HTML
Web pages used to be made of content formatted (or “marked up”) with HTML tags. All HTML tags have an opening tag ‹b› and a closing tag ‹/b› that goes around the content to indicate formatting. Famous HTML tags include:
<b> makes things bold </b>
<i> makes things italic </i>
<u>underlines text</u>
Anatomy of an HTML Page
HTML pages have a simple format:
<html>
<head>
Header information goes here
</head>
<body>
The content of the HTML page goes here
</body>
</html>
XHTML and HTML
The problem with HTML tags is that they were universally pre-defined. It took many tags to create just the right formatting.
XHTML was designed to solve this problem by making all of the tags user-defined.
But use of the pre-defined HTML tags linger on. So most Web sites use a form of Transitional XHTML that incorporates both XHTML and most of the old HTML tags.
Anatomy of a Transitional XHTML Page
All Transitional XHTML pages begin with a doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
Fortunately, most Web editors automatically insert this for you.
XHTML Tags are case sensitive. Write XHTML tags in lower case . <TABLE> </TABLE> becomes <table></table>
All XHTML open tags must be closed. With HTML, web browsers sometimes let you get away with leaving off a closing tag. With XHTML, container tags like <p></p> must be closed.
Making Links in Transitional XHTML
To turn a word into a link, use the <a href> tag:
<a href = "http://cnn.com">Click here for CNN</a> becomes Click here for CNN
Adding Images in Transitional XHTML
To add an image, use the <img>; tag:
<img src = "http://unix.temple.edu/~susanj/lj/2
Working with Style - The Old Way
In the old days of HTML, you had to continuously specify the font size, color and font-face that you were working with by using the ‹font› tag. The ‹font› tag had three main properties: size, color and face. Typical examples:
‹font size="3"›Your text goes here.‹/font› ‹font size="4" color="#0000ff" face="comic sans ms"›Your text goes here.‹/font›
Here is what the above code would produce:
Your text goes here.
Working with Style the RIGHT way
CSS has replaced the ‹font› tag.
CSS lets you define a style with multiple attributes, then use the style wherever you need to in a document.
Anatomy of a Style
All styles begin with a tag. You may use an already-defined tag from HTML (such as ‹p›), or you may create your own tag.
If you use a pre-defined tag from HTML, the style will inherit whatever characteristics HTML gave it. For example, ‹p› includes the command to skip a line.
You may also make up a tag. These tags are called classes.
Class names begin with a period, such as .mystyle
Squiggle brackets { } are used to indicate the beginning and the ending of a style definition
Properties ( font-family, color, font-size) are separated from their Values (Verdana, #000000, 14px) by a colon : and values end with a semi-colon ; you may list as many properties in a tag as you would like, but be sure to end them with a semi-colon ; - including the last property in your list.
Adding Styles to Your Site
There are three places that you may add css styles to your Web pages.
INTERNAL style sheets are embedded within .html documents in the <head> tags.
EXTERNAL style sheets are separate text files that consist of nothing but CSS styles. These files must end in .css, and must be referenced by .html documents in the <head> tag.
INLINE styles are defined around elements in a Web page that they are applied to. This is the least efficient use of CSS.
Using Internal Style Sheets
You define internal styles within the HEAD tags of your .html document
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:url("images/back40.gif"
</style>
</head>
Using External Style Sheet
First, create an external style sheet called mystyle.css and put it in the same directory as the .html page you are going to use it with.
Second, create an .html document, and place the following code within the <HEAD> tags:
• Then use the tags embedded in your external style sheet within your .html page.
Applying a Style
You may apply a style by embedding it within a pre-existing HTML tag, such as ‹p›. Example:
‹p class = "mystyle"› This text will appear in 18-point, bold, Verdana, color red‹/p ›
Becomes:
You may also apply a style by embedding it within a ‹div› or ‹span› tag. ‹div› refers to larger elements, such as entire paragraphs. ‹span› lets you format smaller areas, such as words within a sentence. To begin with, it's probably safer to use . Example
‹span class = "mystyle"› This text will appear in 18-point, bold, Verdana, color red‹/span ›
Becomes:
CSS Properties
Below are a list of properties you may find useful:
font-family:
font-size:
color:
line-height:
width:
background-color:
CSS Properties and Values
Below are a list of properties you may find useful:
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF
line-height: 20px;
width: 600px;
background-color #990000;
Your book has a pretty good list of properties and values.
Using Tables to Position Elements on a Page
There are two ways to position elements exactly on a Web page – one way is with the DIV and SPAN commands in CSS, and the other is with tables. Most professional Web sites use both approaches simultaneously. However, not all Web browsers support the CSS positioning commands, while all support tables. For now, we are going to use tables.
The Structure of a Table
< table border = "1" > - open a table with a one-pixel border
< tr > - create the first row
< td > - create the first cell in the first row
Content for the first cell of the first row
< /td > - close the first cell
< td > - open the second cell
Content for the second cell of the first row
</ td > - close the second cell
</ tr > - close the first row
< tr > - open the second row
< td colspan = “2” > - open the first cell in the second row, and make the contents of that cell spill over two columns. (Note that this eliminates the need to define the second cell in the second row)
Content for the first cell of the second row, which spills over into the second cell
< /td > - close the first cell in the second row
< /tr > - close the second row
< /table > - close the table
The table looks like this:
CSS Reference
CSS Tutorial (comprehensive)
http://www.w3schools.com/css/default.as
CSS Structures and Rules
http://www.htmlhelp.com/reference/css/s
The Complete CSS Tutorial
http://www.echoecho.com/css.htm
XHTML and HTML
Web pages used to be made of content formatted (or “marked up”) with HTML tags. All HTML tags have an opening tag ‹b› and a closing tag ‹/b› that goes around the content to indicate formatting. Famous HTML tags include:
Anatomy of an HTML Page
HTML pages have a simple format:
<html>
<head>
Header information goes here
</head>
<body>
The content of the HTML page goes here
</body>
</html>
XHTML and HTML
Anatomy of a Transitional XHTML Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
Empty XHTML tags must end with a trailing slash Tags (not attributes) such as <br>; should be written as <br /> XHTML attributes must be quoted as in this example for the image border: <img border="2" ... XHTML tags must be properly nested Incorrect XHTML nesting example: <p> <b> blah...</p></b> Correct XHTML nesting example: <p><b>blah...</b></p>
Making Links in Transitional XHTML
<a href = "http://cnn.com">Click here for CNN</a> becomes Click here for CNN
Adding Images in Transitional XHTML
<img src = "http://unix.temple.edu/~susanj/lj/2
Working with Style - The Old Way
In the old days of HTML, you had to continuously specify the font size, color and font-face that you were working with by using the ‹font› tag. The ‹font› tag had three main properties: size, color and face. Typical examples:
‹font size="3"›Your text goes here.‹/font› ‹font size="4" color="#0000ff" face="comic sans ms"›Your text goes here.‹/font›
Here is what the above code would produce:
Your text goes here.
Working with Style the RIGHT way
Anatomy of a Style
.mystyle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FF0000;
}
Adding Styles to Your Site
Using Internal Style Sheets
You define internal styles within the HEAD tags of your .html document
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:url("images/back40.gif"
</style>
</head>
Using External Style Sheet
<head>
<link rel="stylesheet" type="text/css"href="mystyle.css" />
</head>
• Then use the tags embedded in your external style sheet within your .html page.
Applying a Style
‹p class = "mystyle"› This text will appear in 18-point, bold, Verdana, color red‹/p ›
Becomes:
‹span class = "mystyle"› This text will appear in 18-point, bold, Verdana, color red‹/span ›
Becomes:
CSS Properties
Below are a list of properties you may find useful:
CSS Properties and Values
Below are a list of properties you may find useful:
Your book has a pretty good list of properties and values.
Using Tables to Position Elements on a Page
There are two ways to position elements exactly on a Web page – one way is with the DIV and SPAN commands in CSS, and the other is with tables. Most professional Web sites use both approaches simultaneously. However, not all Web browsers support the CSS positioning commands, while all support tables. For now, we are going to use tables.
The Structure of a Table
< table border = "1" > - open a table with a one-pixel border
< tr > - create the first row
< td > - create the first cell in the first row
Content for the first cell of the first row
< /td > - close the first cell
< td > - open the second cell
Content for the second cell of the first row
</ td > - close the second cell
</ tr > - close the first row
< tr > - open the second row
< td colspan = “2” > - open the first cell in the second row, and make the contents of that cell spill over two columns. (Note that this eliminates the need to define the second cell in the second row)
Content for the first cell of the second row, which spills over into the second cell
< /td > - close the first cell in the second row
< /tr > - close the second row
< /table > - close the table
The table looks like this:
Content for the first cell of the first row |
Content for the second cell of the first row |
| Content for the first cell of the second row, which spills over into the second cell |
|
CSS Reference
http://www.w3schools.com/css/default.as
http://www.htmlhelp.com/reference/css/s
http://www.echoecho.com/css.htm
