Tags are elements of the HTML language. Almost every kind of tag has
an opening symbol and a closing symbol. For example, the <HEAD> tag
identifies the beginning of heading information. It also has a closing
tag </HEAD>.
<HTML></HTML>
This element tells browsers that the file is a HTML document. Each
HTML document starts with the tag <HTML>. This tag should be first
thing in the document. It has an associate closing tag </HTML>
which must be the last tag in the file.
<HEAD></HEAD>
The head contains important information about the document.
<TITLE></TITLE>
The title tag is an important tag. It is used to display a title on
the top of your browser window. Both the opening and the closing tags go
between the head tags.
The following example shows how to use the tags:
<html>
<head>
<title>John's Homepage</title>
</head>
<body>
</body>
</html>
<META>
Another tag that can be added in the head is a <META> tag. It is
used to help search engines index a page. There are several different
meta names.
The author meta:
<META NAME="author" CONTENT="Nongjian Zhou">
The description meta:
<META NAME="description"
CONTENT="A very easy tutorial for HTML beginners">
The keyword meta. Note that always seperate Keywords with a comma:
<META NAME="keyword"
CONTENT="html,tutorial,beginner,web design">
The following example shows how these tags are coded:
<head>
<title>HTML For Beginners</title>
<meta name="Author"
content="Nongjian Zhou">
<meta name="Description"
content="A very easy tutorial for HTML beginners">
<meta name="Keywords"
content="html,tutorial,beginner,web design">
</head>
<BODY></BODY>
The Body Tag is used to identify the start of the main portion of your
webpage. Between <BODY> </BODY> tags you will place all
images, links, text, paragraphs, and forms. We will explain each tag that
is used within the body of the HTML file.
Character, Paragraph and Position
<H#></H#>
There are six levels of headings, numbered 1 through 6. These tags are
used for the characters in the outlines. The biggest heading is
<H1> and smallest one is <H6>:
<H1>Biggest text</H1>
......
<H6>smallest text</H6>
<P></P>
Paragraph tags (<P> opening tag and </P> closing tag)
allow you to place a paragraph. For example:
<p>Basic Information</p>
The </P> closing tag may be omitted.
Align
The defaulted position is left justification. You can also use
"ALIGN" for justification:
<p ALIGN="center"> Paragraph will be centered</p>
<p ALIGN="left"> Paragraph will be left justified</p>
<p ALIGN="right">Paragraph will be right justified</p>
<CENTER></CENTER>
This kind of tags have capability of allowing you to center the text
on the homepage.
<center><p> Paragraph will be centered</p></center>
<BR>
This tag break whatever to be on the next line. The following is an
example:
<p>Welcome To<br> My Homepage!</p>
<HR>
This tag adds a horizontal line or divider to your web site. An
<HR> tag makes the following divider:
The <hr> tag can be set as:
<hr width="450" align="right"
size="5">
You can add spaces in your text by using .
<BLOCKQUOTE></BLOCKQUOTE>
You can use this tag to format or remove a text by movinging both the
left and right sides of the paragraph.
<BLOCKQUOTE>
<H1>Welcome To John's Homepage!</H1>
<p>Content</p>
<p>Basic Information</p>
</BLOCKQUOTE>
<PRE></PRE>
Preformatted the text of the paragraph to exactly display what you
typed in the Web browser. For example:
<pre>
ItemPricequantity
-----------------------------
A34.9923
B25.9513
-----------------------------
</pre>
Comments
The comment tag looks like this:
<!-- Comments -->
Nothing inside the comment tags will show up when your page is viewed.
Character Style
Character styles include physical and logical character styles, and
Face, Size, and Color. The following is character style table.
Type
Choice
function
Physical
styles
<B>
Make
text bold.
<I>
Make
text italic.
<U>
Make
text underline.
<Strike>
Make
text strikethrough.
<Sup>
Make
text superscript.
<Sub>
Make
text subscript.
Teletype
Make
text teletype.
Logical
styles
<Strong>
Indicate
the text is very important.
<Em>
Indicate
the text is important.
<Cite>
Indicate
that the text is from a book or other document.
<Address>
Indicate
that the text is an address.
<Dfn>
Indicate
that the text is a definition.
<Samp>
Indicate
that the text is a sequence of literal characters.
Keyboard
Indicate
that the text is keyboard input.
<Var>
Indicate
that the text is a variable.
<Code>
Indicate
that the text is code.
Font
Choice
Function
Face
Default
Make
text display in the default font (Times New Roman) of the Web browser.
Family
Type
a list of fonts separated by commas (for example, Helvetica, Arial,
Courier). The text will display in the first listed font found on the
browser's system.
(Font
name)
Make
the text display in the font specified. (If the font is not available
on the browser's system, another font will be substituted.)
Size
1
through 7 (3 is the default)
Format
text with 7 sizes where 7 is the largest size and 1 is the smallest.
Increase
Format
text with the largest size (same as 7).
Decrease
Format
text with the smallest size (same as 1).
Color
"#xxxxxx"
or: White, Red, Blue and Others
Make
the text a different color.
The tags below have the effect shown on the text in between.
<U>underlined text</U>
<B>bold text</B>
<I>Italicized text</I>
<BIG>Big text</BIG>
<SMALL>small text</SMALL>
<TT>Monospaced typewriter text</TT>
<BLINK>blink</BLINK>
(Note: This only works on Netscape)
<SUB>This makes a subscript.</SUB>
<SUP>This makes a superscript.</SUP>
<STRIKE>strikeout</STRKE>
<FONT FACE="Arial">This is a test</FONT>
<FONT COLOR="#00FF00">Text is in the color of Green</FONT>
<FONT SIZE="+2">This is a test</FONT>
<BASEFONT>
You may use this tag to set default font face, size or color for your
page and save your time of coding. For example:
<basefont face="Arial" size="7" color="red">
Lists
There are three kinds of lists in HTML:
Unordered lists <UL></UL>
Ordered lists <OL></OL>
Definition lists <DL></DL>
Unordered Lists
This list starts with an opening list <UL> tag and ends the list
with a closing list </UL> tag. Between the <UL> and
</UL>, you enter the <LI> (list item) tag followed by the
individual item; no closing </LI> tag is needed. For example:
<UL>
<LI> Name
<LI> Phone
<LI> ID
</UL>
In the web browser the above code would appear three elements as:
Name
Phone
ID
Ordered Lists
An orderered list is similar to an unordered list, except it uses
<OL> instead of <UL>:
<OL>
<LI>College
<LI>Hight School
<LI>Elemantory School
</OL>
The output is:
College
Hight School
Elemantory School
Definition Lists
A definition list starts with <DL> and ends with </DL>.
This list consists of alternating a definition term and a definition
definition. The definition term is enclosed in <DT> </DT> and
should precede the definition definition. The definition definition is
enclosed in <DD> </DD>. So, a whole definition list looks
like:
<DL>
<DT> term </DT>
<DD> definition </DD>
...
<DT> term </DT>
<DD> definition </DD>
</DL>
Links
Links allow you to navigation from one page to another on the internet
or in your local machine. Before you add a link to your page you need a
URL of another web site or a path of your local file that you want to
link to. The link tag also provides the capability to provide a way for
linking an e-mail address. To link to another file in your current
dictionary, use <A HREF="name.html"> anchor text
</A>. For example:
<A HREF="bscInfo.html">Basic Information</A>
If you want to link to a file that in another dictionary, you can
write the code like this:
<A HREF="path/name.html">Text</A>
You can create links from your webpage to other webpages on internet:
If you want link to the an email address and when you click it, then
start the mail program, you can write the a link like this:
<A HREF="mailto:internet101@go.com">Email us</A>
If a file has a large size, you may want to create links to different
parts of the page. To do that, first you must leave a pointer to the
place in the file you want to link to. The pointer looks like <A
NAME="xyz">. Then use <A HREF="#xyz"> tags.
For example, you want to have a link from the section D to the section
"My current project" of your page. Right before "My
current project" you need to type <A NAME="M">. At
the section D of your page you add the following link: <A
HREF="#M">. The # symbol tells your browser to look for the
link within the same document instead of looking for another file. You
can use any number or letter to replace "M":
<BODY>
<A NAME="M"></A>My current projects
......
<A HREF="#M"></A>Click here to see my projects</A>
</BODY>
You can link to any place in other documents by the same way:
<A HREF="people.html#F3">Faculty Infomation</A>
You also can link a part of another page on the Internet if you can
put a pointer <A NAME=""> in it:
<A HREF="http://server/path/file#F3">
Image
Most Web browsers can display images that are in GIF, or JPEG format.
To include an image, enter:
<IMG SRC="ImageName">
For example: <IMG SRC="monky.gif"> The
<IMG> tag is used to define an image. This tag does not have a
closing tag. The IMG part tells the browser to add an image, The SRC
tells your browser where to find the image. You should include two other
attributes on <IMG> tags to tell your browser the size of the
images. The HEIGHT and WIDTH attributes let your browser set aside the
appropriate space (in pixels) for the images. For example:
<IMG SRC="monky.gif" HEIGHT=80 WIDTH=100>
You can put an image in the left or right of a page by using
ALIGN.. For example:
<IMG SRC="ImageName" ALIGN="right">
By default the bottom of an image is aligned with the following text.
You can align images to the top, bottom or middle of a paragraph by using
one of three things: TOP, MIDDLE, BOTTOM, For example:
<IMG SRC="monky.gif" ALIGN="top">
Note: You must use "align", not "valign" to set
for TOP, MIDDLE, BOTTOM. It's different from the table alignment. We can
use "vspace" and "hspace" to adjust space around the
picture:
<IMG SRC="monky.gif"
vspace="50" hspace="80">
The ALT attribute is one of IMG attributes. You can use the ALT
attribute to specify text to be displayed instead of an image. For
example:
<IMG SRC="monky.gif" ALT="[monky]">
In this example, if someone cannot see the image, at least they will
be able to read the name of the image and know that it would be a monky
because the words "[monky]" is shown in the place.
An image can be used as hyperlinks just like plain text. The following
is the HTML code:
<A HREF="animal.html"><IMG SRC="monky.gif"></A>
The blue border that surrounds the image indicates that it's a
clickable hyperlink. If you do not want to display this border, you can
add the BORDER attribute and setting it to zero:
You can load an image from another webpage to your page. To display a
image on some one else's page, you need to find the URL:
<IMG SRC="http://www.abcd.com/image2.gif">
You also can use an image as a background. The tag to include a
background image is included in the <BODY> statement as an
attribute:
<BODY BACKGROUND="ImageName">
A large inline image would slow down the loading of the main document.
To avoid it, you may have an image open as an external image. To include
a reference to an external image, enter:
<A HREF="ImageName">link anchor</A>
You can also use a smaller image as a link to a larger image. Enter:
You may want to have a specific color for the background, text, links,
visited links, and active links. In HTML, Colors are coded as a 6 digit
hex RGB (red, green, blue) number. A hexadecimal value in the range
00-FF. For example, 000000 is black (no color at all), FFFFFF is white
(fully saturated with all three colors). FF0000 is bright red, 0000FF is
bright blue, and 00FF00 is pastel green. You must have the "#"
sign before the actual code. You can use the attributes of the
<BODY> tag to change the color of text, links, vlinks (visited
links), and alinks (active links). For example:
<BODY bgcolor="#FFFFFF" text="#000000"
link="#0000FF" vlink="#800000" alink="#808000">
You can also use the name of the color instead of the corresponding
RGB value to indicate some basic colors. For example, "black",
"red", "blue", and "green" are all valid
for use in place of RGB values. Coloring specific text is done very much
like changing the font size. The tag is like:
<FONT color="code"> text </FONT>
This tag can be combined with the font size. For example:
The whole table is opened and closed with <TABLE>
</TABLE>. Each row is encapsulated in <TR> </TR>.
Within the row are cells, enclosed in <TD> </TD>. There can
be as many rows and columns as you want and as will fit on the screen.
The browser will autoformat the rows, vertically centering cell contents
if necessary. If you want a cell to span more than one column, enclose it
in <TD COLSPAN=X> </TD>, where X indicate the number of
columns to span. Similarly, <TD ROWSPAN=X> </TD>
will cause the cell to span X rows. A border can be placed around all the
cells by using <TABLE BORDER=X> </TABLE>, where
X is the number of pixels thick the border should be. Let's see an
example:
<CENTER><TABLE BORDER=1 WIDTH="62%" HEIGHT=90>
<TR>
<TD WIDTH=82><CENTER> Name</CENTER></TD>
<TD WIDTH=111><CENTER>Phone</CENTER></TD>
<TD WIDTH=91><CENTER>ID</CENTER></TD>
</TR>
<TR>
<TD WIDTH=82><CENTER>John Lee</CENTER></TD>
<TD WIDTH=111><CENTER>456-968</CENTER></TD>
<TD WIDTH=91><CENTER>276580</CENTER></TD>
</TR>
<TR>
<TD WIDTH=82><CENTER>Cherry Heitz</CENTER></TD>
<TD WIDTH=111><CENTER>789-326</CENTER></TD>
<TD WIDTH=91> <CENTER>908743</CENTER></TD>
</TR>
</TABLE></CENTER>
Name
Phone
ID
John Lee
456-968
276580
Cherry Heitz
789-326
908743
The value of width and height can be "xx%" or XX. For
example: WIDTH="80%" or WIDTH=450. "xx%" allow the
table size changing while the window size is changing. The value of
Border can be zero. In this case, the table will have no border. You can
make a table looking like this:
The following is the code of this table.
<TABLE BORDER=10 CELLSPACING=10 CELLPADDING=2>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>
The CELLSPACING attribute refers to the space between cells and should
be in pixels. The CELLPADDING attribute refers to the spacing within the
cell in pixels (the space between the cell walls and the contents of the
cell).
Element
Description
<TABLE>
</TABLE>
defines
a table in HTML. If the BORDER attribute is present, your browser
displays the table with a border.
<CAPTION>
</CAPTION>
defines
the caption for the title of the table. The default position of the
title is centered at the top of the table. The attribute ALIGN=BOTTOM
can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption.
<TR>
</TR>
specifies
a table row within a table. You may define default attributes for the
entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE,
BOTTOM). See Table Attributes at the end of this table for more
information.
<TH>
</TH>
defines
a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to determine
the characteristics of the cell and/or its contents. See Table
Attributes at the end of this table for more information.
<TD>
</TD>
defines
a table data cell. By default the text in this cell is aligned left and
centered vertically. Table data cells may contain other attributes to
determine the characteristics of the cell and/or its contents. See
Table Attributes at the end of this table for more information.
Attribute
Description
ALIGN
(LEFT, CENTER, RIGHT)
Horizontal
alignment of a cell.
VALIGN
(TOP, MIDDLE, BOTTOM)
Vertical
alignment of a cell.
COLSPAN=n
The
number (n) of columns a cell spans.
ROWSPAN=n
The
number (n) of rows a cell spans.
NOWRAP
Turn
off word wrapping within a cell.
Form
Forms allow the user to enter information. For example, you can use
forms to collect user's names and email addresses. Forms begin with the
tag <FORM> and end with </FORM>.
<FORM ACTION="path/script.pl" METHOD="">
......
</FORM>
Two attributes you should type for your form are the Form Action and
Method.:
You can use radio buttons to ask a question with one answer. For
example, if you wanted to ask "Which picture do you like?" and
you wanted to have the choices "monky", "flower",
"girl", "building", you would type:
Checkboxes let the user check things from a list. The form is:
<INPUT TYPE="checkbox" NAME="name" VALUE="text">
Notice that the difference between check boxes and radio buttons is
that any number of check boxes can be checked at one time while only one
radio button can be checked at a time. For example, if you wanted to ask
"Which picture do you like?" and you allow any number of check
boxes can be checked at one time, you would type:
Other button types include submit and reset. "submit" is the
button the user presses to send in the form. "reset" clears the
entire form so the user can start over. For example:
<INPUT TYPE="submit" NAME="submit" VALUE="Send">
<INPUT TYPE="reset" NAME="reset" VALUE="Clear">
The result is:
Password
This type allows users to type in text but instead of displaying the
text that they type astericks are displayed instead:
<INPUT TYPE="password" NAME="pass" SIZE="20">
Pull-Down Menu
You can ask a question with only one answer is by using a pull-down
menu. For example:
How old are you?
<SELECT NAME="age">
<OPTION>1-15
<OPTION SELECTED >16-21
<OPTION>22-30
<OPTION>31-45
<OPTION>46-65
<OPTION>66-80
<OPTION>81-up
</SELECT>
The result is:
How old are you?
Scroll-Down Menu
Ther are two kinds of scroll-down menus. One is that you can only
select one item:
How old are you?
<SELECT NAME="age" SIZE=5>
<OPTION VALUE="1-15">1-15
<OPTION VALUE="16-21">16-21
<OPTION VALUE="22-30">22-30
<OPTION VALUE="31-45">31-45
<OPTION VALUE="46-65">46-65
<OPTION VALUE="66-80">66-80
<OPTION VALUE="81-up">81-up
</SELECT>
The result is:
How old are you?
The other menu is that you can select one or more items by holding
down shift. For example:
What is your favorite thing?
(Hold <i>shift</i> to select more that one)
<SELECT NAME="reading" MULTIPLE size="3">reading
<OPTION VALUE="sports">sports
<OPTION VALUE="travelling">travelling
<OPTION VALUE="music">music
<OPTION VALUE="cooking">cooking
<OPTION VALUE="shopping">shopping
<OPTION VALUE="talking">talking
</SELECT><P>
The point is "multiple".
Frame
With frames, you can put a number of HTML pages into a single window,
each of frame can display a page. frames start and end with the
<FRAMESET></FRAMSET> tags. The <FRAMESET> tag can have
two modifiers: ROWS and COLS to define how big the frames will be. For
example:
<html>
<head><title></title></head>
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize
target="contents" src="top.htm">
<frameset cols="150,*">
<frame name="contents" target="main"
src="menu.htm">
<frame name="main" src="home.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't
support them.</p>
</body>
</noframes>
</frameset>
</html>
Let's explain each element:
rows="64,*" means that the the first frame will take
up 64 rows of the window and the second frame will take up the rest. An
asterisk means that the row will take up whatever space is left. You can
use percentage to replace length. For example: cols="30%,60%"
<frame> defines each individual frame.
name="..." gives the frame a name.
src="..." tells which page will be loaded in the
frame.
target="..." allows you to make links appear in
specific frames or windows.
scrolling="yes|no|auto" allows you to control the
scroll bars on the frame. "yes" forces the frame to always have
scroll bars. "no" forces the frame to never have scroll bars.
"auto" allows the browser to decide if scroll bars are
necessary. The default value is "auto".
noresize allows you to keep the frame from being resizable by
the viewer.
</noframes> is used to create a frameless alternate. When the
page is viewed by a browser that does not support frames, everything
EXCEPT what is between the </noframes> tags is ignored.
There are also some "magic" TARGETs.
"_blank" will always open the link in a new window.
"_top" will open the link in the whole page, instead of in a
single frame.
"_self" makes the link open in the frame it's called from. This
is useful when the <BASE...> tag is used.
"_parent" opens the link in the immediate frameset parent of
the frame the link is called from.
Example:
<A HREF="ah.html" TARGET="_blank">text</A>
And, TARGET can also be added to the <FORM> tag to make the
output from the script got to the specified frame or window.
HTML for CodeProject Articles
(Added by Chris Maunder)
If you wish to submit articles to the Code Project, and you want to
see your article up ASAP, then the easier you make it for us, the faster
it gets posted.
We use style
sheets for our articles, so you do not need to add any formatting at
all. Typically we only use <h1> - <h5> for headings,
<p> for paragraphs, <code> for function names within text
paragraphs, and <pre> for blocks of code. That's it - no fancy
fonts, no colors - it is all taken care of for you.