Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Lesson 2: Grouping Text Logically
A <BR> tag will force a hard (or carriage) return to single space
text.
Earlier versions of HTML only had a single <P> tag to indicate the
beginning of a new paragraph.
The <P> generates a blank row between paragraphs. Restore (rather
than maximize your browser window, then drag the browser's window left or
right border to change its horizontal size on the screen and observe how
paragraph text adjusts within the confines of the window's pane.
HTML 3 and later versions require both a <P> at the beginning and a
</P> at the end of a paragraph as standard syntax.
Text can easily be formatted with physical tags to appear:
- Bold by entering: <B>Bold</B>
- Italic by entering: <I>Italic</I>
- Underlined by entering:
<U>Underlined</U>
You may also combine any two of the above formatting types,
- Bold & Italic by entering: <B><I>Bold &
Italic</I></B>
- Bold & Underlined by entering:
<B><U>Bold & Underlined</U></B>
- Italic & Underlined by entering:
<I><U>Italic & Underlined</U></I>
Finally you can combine all three:
Bold & Italic & Underlined,
by entering: <B><I><U>Bold & Italic &
Underlined<UI></I></B>
The above are referred to as physical tags because they
are intended to define how text is to be displayed in a web document.
Tags which emphasize how text is used in a web page is covered
in Lesson 6.
Lesson 3: Creating Lists
An Ordered List is numbered automatically:
- List Item one
- List Item two
- List Item three
The above list can be generated with the following code:
<OL>
An Ordered List is numbered automatically:
<LI>List Item one
<LI>List Item two
<LI>List Item three
</OL>
Ordered Lists' attributes include:
TYPE="1" ; for: 1, 2, 3, 4, ...
"a" ; for: a, b, c, d, ...
"A" ; for: A, B, C, D, ...
"I" ; for: I, II, III, IV, ...
"i" ; for: i, ii, iii, iv, ...
START=x
- where x = 1 to ..., indicating the number of the initial List Item.
An Unordered List is bulleted automatically:
- List Item one
- List Item two
- List Item three
The above list can be generated with the following code:
An Unordered List is bulleted automatically:
<UL>
<LI>List Item one
<LI>List Item two
<LI>List Item three
</UL>
Unordered List attribute:
TYPE="disc" ; the default, or
"square"
- "circle"
Notice, how the List's title is indented is determined by
where it is placed before or after the beginning List tag
regardless of whether it is <OL> or <UL>.
Lesson 4: Creating a Definition List
- A Definition List
- displays a term on one line, and its meaning is indented on the next
line as illustrated here.
- <DL> and </DL>
- The Definition List beginning and ending tags are placed around the
entire list of terms and definitions making up the entire list.
- <DT>
- Definition Term, a <DT> is placed at the beginning of each term
to be defined, it does not require an end tag.
- <DD>
- Definition Description, a <DD> is place at the beginning of each
term's definition, it has no end tag.
Definition List syntax:
<DL>
<DT>The Term
<DD>The definition of the term.
<DT>A Word
<DD>A description of the word's meaning.
</DL>
Lesson 5: Adding a Horizontal Rule
The Horizontal Rule (or line) across a page, marks the
beginning and/or ending of a page segment. It is generated by a single
<HR> tag.
Horizontal Rule optional attributes: WIDTH="X%", WIDTH=X, SIZE=X, ALIGN=, NOSHADE.
"X%" is the length of the rule as a percentage of the page's width;
X=1-100. Default="100%"
X is the WIDTH or SIZE
(thickness) of the rule in number of pixels.
ALIGN= designates LEFT, CENTER,
RIGHT alignment.
Alignment has no effect, unless a width of less than 100% is set; center is the default.
NOSHADE will make the line appear flat, without 3-D shading.
The following Horizontal Rule options are illustrated respectively below:
<HR WIDTH=25 ALIGN=LEFT SIZE=2>
<HR WIDTH="25%" ALIGN=LEFT SIZE=3>
<HR WIDTH="50%" SIZE=5>
<HR WIDTH="75%" ALIGN=RIGHT SIZE=8>
<HR NOSHADE>
Lesson 6: Logical Formatting Characters
In addition to the making text appear, bold, italicized, or
underlined, as illustrated in Lesson 2, the
following logical tags can be used as follows:
- <KBD> ... </KBD> -
KeyBoarD tags
- will usually display the text between the tags in the
"Courier" font. It could be used to indicate
text to be entered by a user into a form's field.
- <CODE> ... </CODE> -
CODE tags
- like the KeyBoarD tags, the CODE tags
will usually display the text between the tags in the
"
Courier" font. It would be appropriate, for example, to use
CODE tags to indicate programming syntax in a page designed
to teach a computer language.
- <EM> ... </EM> - EMphasis tags
- displays emphasized text between the tags. It usually
is displayed as italicized.
- <STRONG> ... </STRONG> - STRONG
tags
- This Strong tag is intended to be a level
above EMphasis and generally appears to duplicate the
effect of the Bold physical tag.
- <VAR> ... </VAR> - VARiable
tags
- Variable tags are to indicate the name of a
variable to be replaced by an actual value, algebra anyone?
Depending on the browser, tagged text may appear in
italics or underlined.
- <SAMP> ... </SAMP> - SAMPle
tags
- This Sample text usually appears in a fixed width
typewriter style, to literally indicate sample letters, similar (or
duplicates) the effect of the
Code tags.
- <DFN> ... </DFN> -
DeFiNition tags
- This tag designates a word or term to be
defined. Logical character styles are intended to indicate
how text is actually used in a document, rather than controlling how
it will be displayed by a browser.
- <CITE> ... </CITE> - CITE
tags
- are used to indicate or cite a "citation" or "short
quote."
Logical style tags should be used to indicate how designated
text is used in a page and how it is displayed is determined by browser
settings. Physical style tags define the appearance of text
and is generally uniform across most browsers.
Lesson 7: Adding Preformatting Text
Spaces are ignored in HTML so that entering the following text:
Here a space there a space everywhere
a "space space."
will still appear when viewed with a browser as if it was entered
without spaces as follows:
Here a space there a space everywhere
a "space space."
unless it is entered between PREformat tags:
<PRE>Here a space there a space everywhere
a "space space."</PRE>
Lesson 8: Adding Comments
Comments are used to document a web page. Text entered between comment
tags is not displayed in the normal browser window. Comments can be read
by a viewer utilizing a browser's feature allowing a user to read a web
page's source code.
<!--This is what a comment looks like-->
Lesson 9: Using Character Entities
Special character strings are used to display certain characters that
would otherwise interpreted by a browswer as HTML code. Most of these can
be entered from HTML Assitant Pro's HTML menu.
| Symbol |
String |
  |
Symbol |
String |
| < |
< |
|
© |
© |
| > |
> |
|
® |
® |
| " |
" |
|
& |
& |
| Non-breaking space |
|
An example, in order to display the beginning Hypertext tag,
<HTML> you must enter: <HTML>
Continue with Project 3
or go back to the Table of Contents.
Last updated: Dec. 6, 1998.