Docstoc

Background Code for Html

Document Sample
Background Code for Html Powered By Docstoc
					                             Basic HTML Conventions and Codes


A Brief History of HTML....

HTML stands for Hyper Text Markup Language; it is a subset of SGML (Standardized General
Markup Language), the original document formatting language which was used on the old
ARPANET, the forerunner of the Internet.

SGML was designed so that users could trade information electronically in a neutral file
format; it was an attempt to develop a device independent language to allow documents
generated on any computer to be displayed properly on any other computer, no matter what
type of computer/operating system the user might have. This is still basically true of HTML,
provided the programmer uses the codes that have been standardized by the W3 consortium.

Some commercial browser software, typically Netscape’s Navigator and Microsoft’s Explorer,
recognize non-standard implementations of HTML (and other Internet related languages such
as Java). While this extends the capabilities of the software, the problem is they do not
recognize the same set of non-standard elements, so documents written specifically for one
browser may not work correctly when viewed in another.

The list of codes and examples shown below are, to the best of my knowledge, implemented
correctly on all current versions of Navigator and Explorer; they have not been tested with any
other software, but would probably work correctly in current versions of other browsers. This
may not be enough for you to write the code for a killer Web site, but it should be enough to get
you started learning HTML.

No claim is made for the completeness of this list.


Coding Conventions

HTML code elements (commands) have a distinctive look. They are always contained between
left and right carets - < ... >. Some elements require a closing tag, while others do not. If a
closing tag is required, it is shown in the examples below. A closing tag is simply a way of
telling the browser to stop doing whatever the starting tag has told it to do. All closing tags
begin with a left caret and a right-hand slash, and end with a right caret - </ ...>. Everything
between the starting and closing tag is affected.

Note that any code found between carets is treated as a command and is not displayed; code
found between opening and closing tags may or may not be displayed. HTML is not case
sensitive; <B> is the same as <b>, for example.


Elements of an HTML Document

An HTML document should contain certain basic elements. A document starts by identifying
that it is an HTML document with the <HTML> tag. A document must end with the </HTML>
tag. Everything else must go between these two tags.

An HTML document has two basic sections, the <HEAD> ... </HEAD> and the <BODY> ...
</BODY>. The HEAD section should contain the <TITLE> ... </TITLE> of the document. The
text between the TITLE tags serves to give a name to the document and is usually displayed in
the browser’s title bar. The HEAD section is also used by advanced programmers to embed


HTML Basics                                                                       Page 1 of 10
special code such as JavaScript, since this section loads first. The information in the HEAD
section is not displayed in a browser’s window.

The BODY section contains all the data that is displayed in the browser’s window (text and
graphics), as well as all the code that controls how the data is formatted and displayed.


Global Commands to Change Colors, Etc.

The following commands can be used singly or in combination to affect the color of the
background and various text elements.

BACKGROUND                      <BODY BACKGROUND=URL>
                                Where URL is a link to a graphic file; used to display a picture
                                as a background for the document.

BGCOLOR                         <BODY BGCOLOR=RGB>
                                Changes background color. For RGB see below.

TEXT                            <BODY TEXT=RGB>
                                Changes text color. For RGB see below.

LINK                            <BODY LINK=RGB>
                                Changes hyperlink text color. For RGB see below.

VLINK                           <BODY VLINK=RGB>
                                Changes visited hyperlink text color. For RGB see below.

ALINK                           <BODY ALINK=RGB>
                                Changes active body content hyperlinks. For RGB see below.

These commands can be used in any combination in one line of code, shown here:

<BODY BGCOLOR = “gray” TEXT = “black” LINK = “green” VLINK = “red”>

The commands are separated by a single space, allowing the browser to parse the string into
separate commands.

The value RGB can be specified in several ways. It can be a hexadecimal value ranging from
000000 to ffffff, with the first two values specifying the red component of the color, the second
two specifying the green component, and the last two specifying the blue component. Another
way is to use one of the text strings that most browsers recognize, such as “blue”, “red”, “green”,
“black”, “white”, “gray”, and “yellow”. The use of lt and dk make the colors light or dark as, in
“lt blue” or “dk red”

Note that most browsers allow the user to specify their own choice of colors and backgrounds,
effectively overriding any of these commands.


Text Formatting Commands

The next set of commands gives the programmer control over the location, size, and appearance
of text.



HTML Basics                                                                         Page 2 of 10
BASEFONT                      <BASEFONT SIZE = n>
                              Establishes the basic font size that is use as a reference when
                              FONT SIZE = n is used as a relative reference. n can be a value
                              from 1-7. Most browsers use size 3 as a default, although this
                              can be changed by the user.

FONT SIZE                     <FONT SIZE = n> ... </FONT>
                              When used as a relative reference, n must be signed (+ or -) to
                              indicate how much larger or smaller the text should be
                              compared to the base font size. When used as an absolute
                              reference, the unsigned value indicates the absolute size of the
                              text.

B                             <B> ... </B>
                              Makes everything between the tags bold.

I                             <I> ... </I>
                              Makes everything between the tags italic.

U                             <U> ... </U>
                              Makes everything between the tags underline.

Note that B, I, and U can be used in any combination with each other.

EM                            <EM> ... </EM>
                              Makes everything between the tags emphasized. In most
                              browsers this is usually the same as bold italic.

PRE                           <PRE> ... </PRE>
                              Displays the text between tags as being preformatted for a
                              monospaced, non-proportional font such as Courier. Useful for
                              aligning data in columns by adding spaces where necessary.
                              Data is displayed just as it is typed in, with all line breaks and
                              carriage returns preserved. Other tags such as B, I, and U can
                              be used within the PRE tags.

BLINK                         <BLINK> ... </BLINK>
                              The most annoying and hated tag in HTML! Makes everything
                              between the tags blink off and on at a rate determined by the
                              computers speed.

BR                            <BR>
                              Forces a line break so that the following text starts on the left
                              side of the next line

P                             <P>
                              Forces a new paragraph by inserting a blank line. The following
                              text starts on the left side of the next line.

CENTER                        <CENTER> … </CENTER>
                              The text or graphics between the tags is centered horizontally in
                              the browser window.



HTML Basics                                                                      Page 3 of 10
Note that tags such as <BR> and <P> are required to force line breaks and new paragraphs for
all text not enclosed in the <PRE> ...</PRE> tags. It doesn’t matter how it looks in your editor;
line feeds and paragraph returns are not read by browsers unless they are <PRE> text. You
must specifically indicate where lines should break. This feature allows a browser to auto
word-wrap text to fill the full width of the user’s screen or printed page.

Hyperlinks and References

One of the best features of HTML is the ability to create hyperlinks for the user to click on to
access a different server, document, or even a place within the current document. A hyperlink
can be a text string or a graphic element or both. All hyperlink statements begin with the
anchor element A.

To link to another server/document:

HREF = “URL”                   <A HREF = “URL”> ... </A>
                               The text or graphic between the tags is highlighted and can be
                               clicked on by the user. See below for explanation of valid URLs.

In long documents it is sometimes convenient to enable the user to “jump” to different locations.
A common use would be in an encyclopedia or dictionary, where the user may want to go right to
section “C” without having to scroll through sections “A” and “B”. To do this, “anchors” must be
placed in the document:

NAME = “value”                 <A NAME = “value”> ... </A>
                               The text or graphic between the tags is not highlighted; it
                               merely serves to anchor this specific location so that the next
                               two commands can jump directly to this part of the document.

To jump to an anchor element in the currently displayed document, use the following syntax:

HREF = “#value”                <A HREF = “#value”> ... </A>
                               The text or graphic between the tags is highlighted and can be
                               clicked on by the user. Note that the text used for “value” must
                               be identical in all respects to the text named as an anchor.

To link to another server/document and jump to a specific named anchor within that document,
use the following syntax:

HREF = “URL#value              <A HREF = „URL#value”> ... </A>
                               The text or graphic between the tags is highlighted and can be
                               clicked on by the user. Note that the text used for “value” must
                               be identical in all respects to the text named as an anchor.

What is a valid URL?

A URL is a “Universal Resource Locator”. It can be thought of as a pathname to another
document or resource. Absolute references include the type of transfer protocol to be used and a
named location of the server and document. To identify USI’s home page as an absolute
reference in a URL would look like this:

http://www.usi.edu

To make a link to this, an HTML document would have a line of code that would look like this:


HTML Basics                                                                       Page 4 of 10
<A HREF = “http://www.usi.edu”>USI Home Page</A>

The browser window will display USI Home Page. The user can open this document by clicking
on the highlighted text string.

A relative reference uses a text string that identifies a resource’s location relative to the current
document’s location. If a resource is in the same directory as the current document, use the
following:

<A HREF = “newdoc1.htm”> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string.

If a document is in a subdirectory one level below the current document, use the following:

<A HREF = “subdir1/newdoc1.htm”> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string.

If a document is in a subdirectory two levels below the current document, use the following:

<A HREF = “subdir1/subdir2/newdoc1.htm”> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string.

To open a resource that is in a different directory at the same level as the current document, use
the following:

<A HREF = “../otherdir/newdoc1.htm”> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string.

To open a resource that is in a different directory one level above the current document, use the
following:

<A HREF = “../../highdir/newdoc1.htm”> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string.

To open a document in the parent directory (one level higher), use the following:

<A HREF = “../newdoc1.htm> New Document #1 </A>

The browser window will display New Document #1. The user can open this document by
clicking on the highlighted text string. Each set of ellipsis (...) tells the browsers to go one level
higher before looking for the named directory/document.

Note that the resource can be another document file, a graphic file, or any other file type. If it is


HTML Basics                                                                            Page 5 of 10
a file type that a browser can display or use, it will be opened in the browser. If it is a file type
that the browser cannot handle, the user is given the option of saving the file to disk. This
allows formatted files from programs such as word processors or spreadsheets to be transferred
over the Internet.


Graphics, Eye Candy, and Dancing Baloney

One of the features that makes the Internet so popular is the ability for HTML documents to
include graphic elements as well as text. Unlike word processors, which allow graphic images
to be “cut” and “pasted” into a single document, HTML documents must link to graphic images
that are stored as separate files. The images must be identified with a URL. The following
commands are used to display and manipulate graphic images.

HR                               <HR>
                                 This creates a horizontal rule (line) in the document.

The following attributes can be added to modify the rule’s appearance:

WIDTH                            <HR WIDTH = value>
                                 Where value is the line length in pixels (an integer) or as a
                                 percentage of the window’s width (an integer followed by a %).

SIZE                             <HR SIZE = value>
                                 Where value is the thickness (vertical dimension) of the line in
                                 pixels. value is an integer.

NOSHADE                          <HR NOSHADE>
                                 The line’s drop shadow is not displayed.

ALIGN                            <HR ALIGN = value>
                                 Aligns the line relative to the current text.
                                 Use the following for value:
                                 LEFT aligns line to left side of current text.
                                 RIGHT aligns line to right side of current text.
                                 CENTER aligns line in center of current text.

These commands can also be used in any appropriate combination, such as:

<HR WIDTH = 400 SIZE = 10 NOSHADE>

To display “inline” images, the IMG and SRC statements are used:

IMG SRC                          <IMG SRC = “URL”>
                                 The displays the image specified in “URL”.

Note that an inline graphic can be used instead of or along with text as a highlighted element
that the user can click on to open another resource. An example is shown here:

<A HREF = “newdoc1.htm”> New Document #1 <IMG SRC = “image1.gif”></A>

The browser window will display New Document #1 followed by image1.gif, which will have a
highlighted border around it The user can open this document by clicking on the highlighted
text string or the graphic image.


HTML Basics                                                                           Page 6 of 10
The following commands modify the IMG SRC statement:

ALIGN                           <IMG SRC = “URL” ALIGN = value>
                                Use the following for value:
                                TOP aligns top of image with text on same line.
                                MIDDLE aligns middle of image with text on same line.
                                BOTTOM aligns bottom of image with text on same line. (This
                                is the default for most browsers.)
                                LEFT aligns image to left margin of text on same line. Allows
                                text to flow around image.
                                RIGHT aligns image to right margin of text on same line. Allows
                                text to flow around image.
                                TEXTTOP aligns top of image with top of tallest text on the
                                same line. Allows text to flow around image.
                                ABSMIDDLE aligns the middle of the image in the middle of the
                                line of text. Allows text to flow around image.
                                BASELINE aligns the bottom of the image with the baseline of
                                the current line of text. Allows text to flow around image.
                                ABSBOTTOM aligns the bottom of the image with the bottom of
                                the current line of text. Allows text to flow around image.

HSPACE                          <IMG SRC = “URL” HSPACE = value>
                                Creates a space around the horizontal edges of the image equal
                                to the number of pixels specified by value.

VSPACE                          <IMG SRC = “URL” VSPACE = value>
                                Creates a space around the vertical edges of the image equal to
                                the number of pixels specified by value.

Most browsers will display in-line graphic images correctly if they are in *.gif or *.jpg format.
Bitmap images (*.bmp), such as those created by Microsoft Paint, are usually not supported.
This doesn’t mean you can’t transfer *.bmp files over the Internet, it just means that most
browsers require a “helper” program to view the image. Most browsers will ask you if you want
to save the file to disk, so you can view it later.

A note about *.gif files: There are two basic types, gif87 and gif89. The gif87 does not allow for
multiple images or transparent colors. The newer format, gif89, allows multiple images to be
put into a common file. When these files are viewed with a compatible program, the image
changes at a rate determined partially by the clock speed of the computer and partially by the
time interval set by the file creator. This allows for cartoon-like animation, or “dancing
baloney”. The new format also allows the file creator to select a specific color of an image to be
transparent; this masks the selected color and allows the background to show through.

There are a number of shareware programs available to convert *.bmp and other graphic file
formats to *.gif or *.jpg format.


Headings, Lists, and Tables

Headings are somewhat different than the text control features already covered. The
programmer has a lot less control over how a document is displayed when using headings, since
the font type, size, and characteristics for each heading level is determined by the user.
Headings are styles, with the user in control. The following commands are used:


HTML Basics                                                                        Page 7 of 10
Hn                              <Hn> ... </Hn>
                                Makes text between containers take on the style defined as
                                heading n, where n is an integer from 1 to 6.

The following commands modify the heading text alignment:

ALIGN                           <Hn Align = value> ... </H>
                                The following can be used for value:
                                LEFT, CENTER, RIGHT


Lists are ways to consecutive items. HTML allows two types of lists, ordered and unordered.
The difference is in the appearance. Ordered lists display items that are prefixed with a value
that increases by an increment of one, for example I, II, III, or A, B, C. This allows text entries
to be displayed as a numbered list or an outline.

Unordered lists have the text items prefixed with a distinctive marker, such as a circle, square,
or disc. All the items in any individual list will have the same marker. This allows items to
appear as a bulleted list. The following commands are used to handle lists:

OL                              <OL> ... </OL>
                                The text between the tags is treated as an ordered list.

The following commands modify the ordered list items:

TYPE                            <OL TYPE = value> ... </OL>
                                The following can be used for value:
                                A for items to be ordered A, B, C, etc.
                                a for items to be ordered a, b, c, etc.
                                I for items to be ordered I, II, III, etc.
                                i for items to be ordered i, ii, iii, etc.
                                1 for items to be ordered 1, 2, 3, etc.

START                           <OL START = n> ... </OL>
                                Where n is the numerical value for the first item of the list.
                                Allows a list to start at some value other than A|a|I|i|1.

UL                              <UL> ... </UL>
                                The text between the tags is treated as an unordered list.

The following commands modify the ordered list items:

TYPE                            <UL TYPE = value> ... </UL>
                                The following can be used for value:
                                CIRCLE to display a filled circle
                                SQUARE to display a filled square
                                DISC to display an unfilled circle


Tables are used when information needs to be presented in a row and column format. The
following commands define a table and its elements:

CAPTION                         <CAPTION> ...</CAPTION>


HTML Basics                                                                         Page 8 of 10
                              Defines the text between the tags as a caption that will appear
                              associated with the table.

The following command modifies the location of the caption:

ALIGN                         <CAPTION ALIGN = value> ... </CAPTION>
                              Where value can be TOP or BOTTOM.

Note: The CAPTION command must be within the table.

TABLE                         <TABLE> ... </TABLE>
                              The text between the tags is treated as table elements. Tables
                              contain CAPTIONS, table headers (TH), table rows (TR), and
                              cell data (TD).

The following commands modify the appearance of the table:

BORDER                        <TABLE BORDER = n> ... </TABLE>
                              Where n is an integer defining the thickness of the border in
                              pixels. If n is 0 or BORDER is not used, the table will not have
                              a border.

CELLSPACING                   <TABLE CELLSPACING = n> ... </TABLE>
                              Where n is an integer. Defines the horizontal padding between
                              adjacent cells in pixels.

CELLPADDING                   <TABLE CELLPADDING = n> ... </TABLE>
                              Where n is an integer. Defines the vertical padding between
                              adjacent cells.

WIDTH                         <TABLE WIDTH = n> ... </TABLE>
                              Where n is an integer. Defines the width of the table in pixels.

TH                            <TH> ... </TH>
                              Defines the text between the tags as header text. For various
                              alignment and formatting options, see below.

TR                            <TR> ... </TR>
                              Defines the text between the lines as elements in a single row of
                              the table. The text normally consists of table data (TD) and the
                              text to be displayed. For various alignment and formatting
                              options, see below.

TD                            <TD> ... </TD>
                              Defines the text between the tags as data. For various
                              alignment and formatting options, see below.

Note that other HTML commands such as anchor and text formatting elements can be used in
conjunction with the TD tag.

Alignment options for the TH, TR, and TD commands include the following:

ALIGN                         <TH ALIGN = value> ... </TH>
                              Defines the horizontal alignment of the text within the cell. The


HTML Basics                                                                     Page 9 of 10
                               choices for value include LEFT, CENTER, and RIGHT.

VALIGN                         <TH VALIGN = value> ... </TH>
                               Defines the vertical alignment of the text within the cell. The
                               choices for value include TOP, MIDDLE, and BOTTOM

The following cannot be used with the TR command, but can be used with the TH and TD
commands:

NOWRAP                         <TH NOWRAP> ... </TH>
                               Prevents text wrap within a cell.

COLSPAN                        <TH COLSPAN = n> ... </TH>
                               Where n is an integer. Tells the viewer how many columns to
                               span when displaying the data.

ROWSPAN                        <TH COLSPAN = n> ... </TH>
                               Where n is an integer. Tells the viewer how many rows to span
                               when displaying the data.

WIDTH                          <TH WIDTH = n> ... </TH>
                               Where n is an integer. Tells the viewer how many pixels to use
                               to display the text within a cell.


Conclusion

Some HTML elements such as panes, forms and related commands have not been covered here.
Utilizing these elements usually requires server support, usually in the form of Java, PERL, or
other server based languages. An exception to this is JavaScript, which extends the
capabilities of HTML documents. Standard JavaScript resides entirely within the HTML
document that the user is viewing, allowing an extended level of interactivity between the user
and the document.

There are a number of good books available on HTML programming. Buy one with a good
reference section. Learn how to save Internet HTML documents to disk; when you see a Web
document that you find attractive, save it. You can always open it in a text editor to examine
the code and see how somebody else achieves a certain look.




HTML Basics                                                                     Page 10 of 10

				
DOCUMENT INFO
Description: This is an example of background code for Html. This document is useful in conducting a study on background code for Html.