Table of Contents
Basic Tags |
|
Disclaimer Reference |
HTML is NOT case sensitive. Therefore title and TITLE are equivalent to Title. Note there are a few exceptions.
Not all tags are supported by all WWW browsers. If a browser does not support a tag, it (usually) just ignores it.
You use HTML tags to mark the elements of a file for you browser. These elements can combine plain text, other elements or both.
Tags are usually paired (e.g., <CENTER> and
</CENTER>)
to start and end the tag instruction. The end tags look like the start
tag except a slash (/) precedes the text within the brackets.
.html also indicates this is an HTML
document and must be used.
(If you are restricted to 8.3 filenames (e.g., LeeHome.htm,
use only .htm for your extension.)
<H1>.
The syntax of the heading element is:
<Hy>Text of heading
</Hy>
where y is a number between 1 and 6 specifying the level
of the heading. Headings can also be aligned:
Left: <H3 ALIGN=LEFT >
Center:<H3 ALIGN=CENTER >
Right: <H3 ALIGN=RIGHT >
|
this is H2 |
|
|
|
|
Similarly, Breaks can be use to force the end of a sentence and start a new one. The <BR> tag forces a line break with no extra (white) space between lines.
|
|
|
<P> Welcome to the world of HTML.</P> <P> This is the first paragraph.</P> <P> While short it is</P> <P> still a paragraph!</P> |
Welcome to the world to HTML. This is the first paragraph. While short it is still a paragraph! |
<P> Welcome to the world of HTML. <BR> This is the first paragraph. <BR> While short it is <BR> still a paragraph!</P> |
Welcome to the world of HTML.
|
To make an unnumbered, bulleted list,
| Using this code: | Produces this: | |
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
|
|
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag.
| Using this code: | Produces this: |
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
|
|
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line.
| Using this code: | Produces this: |
<DL>
|
|
Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
|
|
You can vary a rules size (thickness) and width (the percentage of the window covered by the rule). Also you can use a horizontal rule with out the 3-D affect.Experiment with the settings until you are satisfied with the presentation.For example:
<HR SIZE=4 WIDTH="50%">
displays as:
and:
<HR SIZE=20 WIDTH="80%">
displays as:
and:
<HR NOSHADE SIZE=20 WIDTH="80%">
displays as:
Use the following tags to change the style of text:
Use the <PRE> tag (which stands for "preformatted")
to generate text in a fixed-width font. This tag also makes spaces, new lines,
and tabs significant (multiple spaces are displayed
as multiple spaces, and lines break in the same locations as in the
source HTML file). This is useful for program listings, among other things.
This is very similar to <code> but very helpful when writing
multiple lines.
<PRE>
for (i=0; i<5; i++)
{
y=y+Prices[i];
}
y=y/5;
y.WriteFract();
</PRE>
|
for (i=0; i<5; i++)
{
y=y+Prices[i];
}
y=y/5;
y.WriteFract();
|
There are two ways to use "special" characters in HTML. Character referencing and numeric referencing. Using the HTML format &#XXX; and this table, these characters can be displayed. These tables were taken from: Gerald J. Brindle (gjb@efn.org) and Michael J. Hannah Sandia National Laboratories The actual pages is listed in the reference section.
| 006 ---- | 007 ---- | 008 ---- | 009 -- -- | 010 -- -- | 011 -- -- |
| 012 ---- | 013 -- -- | 014 ---- | 015 ---- | 016 ---- | 017 ---- |
| 018 ---- | 019 ---- | 020 ---- | 021 ---- | 022 ---- | 023 ---- |
| 024 ---- | 025 ---- | 026 ---- | 027 ---- | 028 -- -- | 029 -- -- |
| 030 -- -- | 031 -- -- | 032 -- -- | 033 --!-- | 034 --"-- | 035 --#-- |
| 036 --$-- | 037 --%-- | 038 --&-- | 039 --'-- | 040 --(-- | 041 --)-- |
| 042 --*-- | 043 --+-- | 044 --,-- | 045 ----- | 046 --.-- | 047 --/-- |
| 048 --0-- | 049 --1-- | 050 --2-- | 051 --3-- | 052 --4-- | 053 --5-- |
| 054 --6-- | 055 --7-- | 056 --8-- | 057 --9-- | 058 --:-- | 059 --;-- |
| 060 --<-- | 061 --=-- | 062 -->-- | 063 --?-- | 064 --@-- | 065 --A-- |
| 066 --B-- | 067 --C-- | 068 --D-- | 069 --E-- | 070 --F-- | 071 --G-- |
| 072 --H-- | 073 --I-- | 074 --J-- | 075 --K-- | 076 --L-- | 077 --M-- |
| 078 --N-- | 079 --O-- | 080 --P-- | 081 --Q-- | 082 --R-- | 083 --S-- |
| 084 --T-- | 085 --U-- | 086 --V-- | 087 --W-- | 088 --X-- | 089 --Y-- |
| 090 --Z-- | 091 --[-- | 092 --\-- | 093 --]-- | 094 --^-- | 095 --_-- |
| 096 --`-- | 097 --a-- | 098 --b-- | 099 --c-- | 100 --d-- | 101 --e-- |
| 102 --f-- | 103 --g-- | 104 --h-- | 105 --i-- | 106 --j-- | 107 --k-- |
| 108 --l-- | 109 --m-- | 110 --n-- | 111 --o-- | 112 --p-- | 113 --q-- |
| 114 --r-- | 115 --s-- | 116 --t-- | 117 --u-- | 118 --v-- | 119 --w-- |
| 120 --x-- | 121 --y-- | 122 --z-- | 123 --{-- | 124 --|-- | 125 --}-- |
| 126 --~-- | 127 ---- | 128 --€-- | 129 ---- | 130 --‚-- | 131 --ƒ-- |
| 132 --„-- | 133 --…-- | 134 --†-- | 135 --‡-- | 136 --ˆ-- | 137 --‰-- |
| 138 --Š-- | 139 --‹-- | 140 --Œ-- | 141 ---- | 142 --Ž-- | 143 ---- |
| 144 ---- | 145 --‘-- | 146 --’-- | 147 --“-- | 148 --”-- | 149 --•-- |
| 150 --–-- | 151 --—-- | 152 --˜-- | 153 --™-- | 154 --š-- | 155 --›-- |
| 156 --œ-- | 157 ---- | 158 --ž-- | 159 --Ÿ-- | 160 -- -- | 161 --¡-- |
| 162 --¢-- | 163 --£-- | 164 --¤-- | 165 --¥-- | 166 --¦-- | 167 --§-- |
| 168 --¨-- | 169 --©-- | 170 --ª-- | 171 --«-- | 172 --¬-- | 173 ---- |
| 174 --®-- | 175 --¯-- | 176 --°-- | 177 --±-- | 178 --²-- | 179 --³-- |
| 180 --´-- | 181 --µ-- | 182 --¶-- | 183 --·-- | 184 --¸-- | 185 --¹-- |
| 186 --º-- | 187 --»-- | 188 --¼-- | 189 --½-- | 190 --¾-- | 191 --¿-- |
| 192 --À-- | 193 --Á-- | 194 --Â-- | 195 --Ã-- | 196 --Ä-- | 197 --Å-- |
| 198 --Æ-- | 199 --Ç-- | 200 --È-- | 201 --É-- | 202 --Ê-- | 203 --Ë-- |
| 204 --Ì-- | 205 --Í-- | 206 --Î-- | 207 --Ï-- | 208 --Ð-- | 209 --Ñ-- |
| 210 --Ò-- | 211 --Ó-- | 212 --Ô-- | 213 --Õ-- | 214 --Ö-- | 215 --×-- |
| 216 --Ø-- | 217 --Ù-- | 218 --Ú-- | 219 --Û-- | 220 --Ü-- | 221 --Ý-- |
| 222 --Þ-- | 223 --ß-- | 224 --à-- | 225 --á-- | 226 --â-- | 227 --ã-- |
| 228 --ä-- | 229 --å-- | 230 --æ-- | 231 --ç-- | 232 --è-- | 233 --é-- |
| 234 --ê-- | 235 --ë-- | 236 --ì-- | 237 --í-- | 238 --î-- | 239 --ï-- |
| 240 --ð-- | 241 --ñ-- | 242 --ò-- | 243 --ó-- | 244 --ô-- | 245 --õ-- |
| 246 --ö-- | 247 --÷-- | 248 --ø-- | 249 --ù-- | 250 --ú-- | 251 --û-- |
| 252 --ü-- | 253 --ý-- | 254 --þ-- | 255 --ÿ-- | 256 --Ā-- | gjb --&#gjb;-- |
<
>
&
"
| Æ
Á
Â
À
Å
Ã
Ä
Ç
Ð
É
Ê
È
Ë
Í
Î
Ì
Ï
Ñ
Ó
Ô
Ò
Ø
Õ
Ö
Þ
Ú
Û
Ù
Ü
Ý
á
â
æ
à
å
ã
ä
ç
é
ê
è
ð
ë
í
î
ì
ï
ñ
ó
ô
ò
ø
õ
ö
ß
þ
ú
û
ù
ü
ý
ÿ
| ´
¦
¸
¢
©
¤
°
÷
½
¼
¾
¡
¿
«
¯
µ
·
¬
ª
º
¶
±
£
»
®
§
­
¹
²
³
×
¨
¥
|
If the text items below appear in different fonts, then your browser supports the <font FACE=XXXX>...</font> tag. If only some of the fonts are different, it may just be that your computer does not have the specified font.
There are 5 different aspect of a web page who's color you can control. They are the background, the regular text, the unvisited links, the currently active link and visited links. Of these, the currently active link is least likely to be used. Even with a slow dial-up modem I rare see the links change colors.
The HTML coding is fairly simple. For the background color use this:
<body bgcolor="#FFFFFF">
This produces a page with a white background because the color code #FFFFFF is
the code for white.
To change the text color, use the follow:
<body text="#000000">
This produces a page with black text because the color code #000000 is the
code for black.
To change the unvisited links color, use the follow:
<body link="#00FF00">
This produces a page with blue links because the color code #00FF00 is the
code for blue.
To change the active link color, use the follow:
<body alink="#DB70DB">
This produces a page with purple links while the link is active
because the color code #DB70DB is the code
for purple.
To change the active link color, use the follow:
<body vlink="#FF0000">
This produces a page with red visted links
because the color code #FF0000 is the code
for red.
The color code are made up of 3 2-digit codes with each 2 digit code representing the amount of red, blue or green that makes up the color. The digits are not base 10 numbers which make them look strange to most people. They are actually hexadecimal or base 16. So 10 in hexadecimal is 16 in base 10. A color that starts with 00 has no red and a color that ends in 00 has no blue. A color that starts with FF has full red and a color with FF as its middle pair of digits has full green.
Your choices of numbers and letters to combine include:0,1,2,3,4,5,6,7,8,9,a,b, c,d,e,f. They can be used in any combination. Here are just a few examples:
| Red | #FF0000 | White | #FFFFFF | Blue | #0000FF | Green | #00FF00 | |||
|---|---|---|---|---|---|---|---|---|---|---|
| Yellow | #FFFF00 | Black | #000000 | Grey | #C0C0C0 | Neon Pink | #FF6EC7 | |||
| Cyan | #00FFFF | Purple | #660099 | Pink | #FFCCFF | Sky Blue | #99CCFF | |||
To change the color of a specific word (like I have done above) use the
<font> tags along with color, Like this:
This would be plain color text, But<font color="#ff0000">THIS</font> is not |
This would be plain color text, But THIS is not |
Not every browser displays color the same way. For example, Netscape
on Macintosh and Windows will sometimes dither color that make up the
background. The dithering pattern makes text difficult to read. A solution is
create with a graphics program a small square image filled with the color that
you want for your background. Then use Netscape's background command within the
body like so:
<body background="red.gif">
The definition of an HTML comment is basically as follows:
A comment declaration starts withThis means that the following are all legal comments:<!, followed by zero or more comments, followed by>. A comment starts and ends with "--", and does not contain any occurrence of "--".
<!-- Hello -->
<!-- Hello -- -- Hello-->
<!---->
<!------ Hello -->
<!>
--" characters, should
always have a multiple of four "-" characters to be legal.
(And yes, <!> is also a legal comment - it's the empty comment).
Not all HTML parsers get this right. For example, "<!------>
hello-->" is a legal comment, as you can verify with the
rule above. It is a comment tag with two comments; the first is empty
and the second one contains "> hello". If you try it in a browser,
you will find that the text is displayed on screen.
There are two possible reasons for this:
-->" text and thinks the comment ends there.
--" sequence. Some people have a
habit of using things like "<!-------------->" as
separators in
their source. Unfortunately, in most cases, the number of "-"
characters
is not a multiple of four. This means that a browser who tries
to get it right will actually get it wrong here and actually
hide the rest of the document.
For this reason, use the following simple rule to compose valid and accepted comments:
An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.
This document contains many parts of many different documents obtained from the WWW. I have attempted to recognize each one in my Reference list.
Useful sites and documents that I have used:
CS at Buffalo's list of HTML reference sites
How to do imagemapsNCSU's help with Image Maps
Professional Web Design
Great Tutorials for frames, tables, and forms.
Introduction To
HTML and URLs By Ian Graham
Color Center
A page that lets you "make" your own color.
RGBHEX Triplet Color Chart
Lists all possiable color combinations
HTML Bad Style Page
A collection of DONTs for HTML
Wilbur - HTML 3.2
Sorry this link is not currently active....(4/29/97)
Another example of bad styleA New Level of HTML-Abuse
T H E B A R E B O N E S
G U I D E T O H T M L by Kevin Werbach
HTML tutorial
Writing HTML: The Lessons Maricopa Center for Learning and Instruction (MCLI)
HTML Reference
Manual by Michael J. Hannah Sandia National Laboratories
David W.
Baker's WWW Authoring Information A great place for info and links
"A Beginner's Guide to HTML"Easy to follow HTML source site
NCSA Mosaic(tm) Tables Tutorial This link is also not active....(4/29/97)
HTML Groups, Discussion
Forums, and Archives
sites
Lots of links and other helpful sites
Introduction to HTML
A good introduction to HTML authoring
Intermediate HTML
A sequel with more advanced lessons.
Hypertext Markup Language - 2.0 (RFC 1866)The HTML standard.
HTML Quick
Reference
A good cheat sheet.
World Wide Web FAQCheck here
for questions on all things Web.
A Guide to URLs
A comprehensive guide to Web locators... That is not active... (4/29/97)
Special Characters