1
PHW – 601 (Internet Programming)
Basic Tags
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">
2
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>
......
3
<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>
4
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>
Item Price quantity
-----------------------------
A 34.99 23
B 25.95 13
-----------------------------
</pre>
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.
Choice function
Type
<B> Make text bold.
Physical <I> Make text italic.
styles <U> Make text underline.
<Strike> Make text strikethrough.
5
Choice function
Type
<Sup> Make text superscript.
<Sub> Make text subscript.
Teletype Make text teletype.
<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.
Logical
<Dfn> Indicate that the text is a definition.
styles
<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
Make text display in the default font (Times New Roman) of the Web
Default
browser.
Type a list of fonts separated by commas (for example, Helvetica, Arial,
Face Family Courier). The text will display in the first listed font found on the
browser's system.
(Font Make the text display in the font specified. (If the font is not available on
name) the browser's system, another font will be substituted.)
1 through
7 (3 is Format text with 7 sizes where 7 is the largest size and 1 is the
the smallest.
Size default)
Increase Format text with the largest size (same as 7).
Decrease Format text with the smallest size (same as 1).
"#xxxxxx"
or: White,
Color Red, Make the text a different color.
Blue and
Others
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>Big text</big></BIG>
6
<SMALL>small text</SMALL>
<TT>Monospaced typewriter text</TT>
<BLINK><blink>blink</blink></BLINK>
(Note: This only works on Netscape)
<SUB>This <sub>makes a subscript.</sub></SUB>
<SUP>This<sup> makes a superscript.</sup></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
7
<LI> ID
</UL>
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:
1. College
2. Hight School
3. 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>
