HTML stands for HyperText Markup Language. When people talk about using HTML or HTML tags all they are really saying is that they are using certain key words to tell the browser how to display text. It is just like telling your favorite word processor to reveal its formatting.
To see an example of this formatting I want you to look at the code that makes up this page. To do that you need to do the following:
Please take note of the words and letters contained within the < and > signs. The command contained between these signs (which I capitalize for ease of reading) are the "tags." They tell the browser how to display the text. Most tags require an opening tag and a corresponding ending tag. The difference between these tags is the /. A tag with a / denotes the ending tag. The opening and closing tags are the same except for the / symbol.
Now lets get to what you came here for...the tags.
The basic format of a tags is < TAG ATTRIBUTE="VALUE" > The information we need within the tag < /TAG > A tag may have multiple attributes. The attributes are to be separated by a space.
< HTML > and < /HTML > Open and close HTML file.
< HEAD > and < /HEAD > Header Tag
< TITLE > and < /TITLE > Title displays at top of browser. Goes between Head tags.
< BODY > and < /BODY > Body of document. All displayed attributes between these tags.
< BR > Forces a line break,
use sparingly.
< B > and < /B > Bolds items between tags.
< I > and < /I > Italicizes items between tags.
< U > and < /U > Underlines items between tags.
< H# > and < /H# > Where # = 1-6. Heading tag. Heading also bolds.
< SUB > and < /SUB > Subscript. Example H2O.
< SUP > and < /SUP > Superscript. Example X3.
< BIG > and < /BIG > Makes type bigger than surrounding text.
< SMALL > and < /SMALL > Makes type smaller than the surrounding text.
< PRE > and < /PRE > Preformatted text.
Keeps the original settings of the typed text. Warning...does not always work.
< P > and < /P > Opening and closing paragraph tags. Does not indent, but will separate paragraphs by a line break. Closing tag optional. A new paragraph tag automatically starts a new paragraph.
< UL > and < /UL > Unordered list (bulleted).
< OL > and < /OL > Ordered list (Number, alpha, Roman)
< OL TYPE="X" > Number is default. X="A" for alpha. X="I" for Roman Num.
< LI > and < /LI > List item. All items between tags indented.
< !--comments written here-- > Comments in here are not printed to screen.
< A > and < /A > Items between the anchor tags are hot links. Text is underlined and the color is changed. Images can also be made hot links.
< A HREF="url placed here" > text to be made hot < /A > The HREF points to the destination.
< A HREF="mailto:rags@sssnet" > text to be made hot < /A > This will start up mail program for e-mail to desired address.
< A HREF="#placename" > text to be made hot < /A > Using the # sign
sets the destination within the current HTML file. Use with
< A NAME=placename > to set the internal destination. This has NO ending tag.
< IMG > The image tag.
< IMG SRC="URL/IMAGEFILE"
ALT="text to be displayed if images turned off"
WIDTH="XXX" (width in pixels)
HEIGHT="XXX" (height in pixels)
ALIGN="TOP (MIDDLE BOTTOM)"
VALIGN="LEFT (RIGHT)
BORDER="XX" (width in pixels) > All but first line optional.
< BODY BGCOLOR="#XXXXXX" > The background color where the X's are equal to a HEX color. OPTIONAL
< BODY BACKGROUND="URL/imagefile" > This is for a textured or picture background. Image is automatically tiled to fit the entire window. OPTIONAL
< BODY TEXT="#XXXXXX" > The color of the text for the page where the X's are equal to a HEX color. Make sure not to clash with the background color(s). OPTIONAL
< BODY LINK="#XXXXXX" > The color for linked text where the X's are equal to a HEX color. Should not clash with background and should differ from text color. OPTIONAL
< BODY VLINK="#XXXXXX" > The color of linked text where the link has been visited where the X's are equal to a HEX color. Should not clash with background and should differ from text color. OPTIONAL
< BASEFONT="X" > The size of the default font on your page where X is a number.
A Table is set up to look like spreadsheet formatting. You will need the following tags.
< TABLE > and < /TABLE > Opening and closing table tags.
< CELLPADDING="X" > Used in opening table tag. Defines extra space
around data.
< CELLSPACING="X" > Used to define the width of the cell borders or gutters.
< BORDER="X" > Used to define the border of the table.
< TH > and < /TH > Table heading tags. Used to define the column
headings.
< TR > and < /TR > Table row. Defines each row. TH and TD (next)
must be between table row tags.
< TD > and < /TD > Table data. This defines each cell of the table.
Your actual data goes here.
< CAPTION > and < /CAPTION > Prints captions outside of the
table.
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
Data 1 | Data 2 | Data 3 |
Data 1-1 | Data 2-1 | Data 3-1 |
Feel free to copy this file onto your own web page. It is free for all use. All that I ask is that you maintain a link to my page http://pages.sssnet.com/rags so that I get credit for my work. This was originally created for use in my internet class. For those in my Wayne College class who are using this to study off of. Look at the source code here!