HTML Basics
If you're doing business on the Internet, learning some basic web design skills is an absolute must. Not only will you have the ability to create your own web pages, but you'll also save yourself a great deal of money. Selecting an HTML Editor
Although there are many HTML editors available on the Internet, the best editor I've found is "1st Page 2000." This powerful editor is great for newbies and experienced webmasters alike, as it can be used in four different modes -- Easy, Expert, Hardcore and Normal. You can select which mode you'd like to use depending on your level of experience. Best of all, it's completely free. http://www.evrsoft.com/
Web pages are created with special codes known as HTML (Hypertext Markup Language). These codes, also referred to as tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.
Example:
<font>
An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.
Example:
<font size="2">
Attributes are only contained in the opening tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in quotes.
Basic Document Structure
Below, is a very basic HTML document structure. It contains the opening HTML tag, the TITLE tag enclosed between the opening and closing HEAD tags, the opening and closing BODY tags and the closing HTML tag. All of your text, graphics and any additional HTML codes will be placed between the <BODY> and </BODY> tags.
<HTML>
<HEAD>
<TITLE> Your Web Page Title </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML >
Each HTML tag above contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets.
Example:
<HTML>
The closing tag contains a forward slash followed by the command enclosed with brackets.
Example:
</HTML>
The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action.
The proper way to write HTML is to place your closing tags in sequence with your opening tags.
Example:
<B><I> Example of the proper sequence of writing HTML </I></B>
Notice that the closing tags are in sequence with the opening tags.
When you have several opening tags, the closing tags will begin with the last opening tag and end with the first. Are you totally confused now? Here's some more examples.
This is an example of a properly written code:
<B><I> Example </I></B>
This is an example of an improperly written code:
<B><I> Example </B></I>
Creating a Basic Document
Begin writing your HTML by creating your document's basic layout -- beginning with <HTML> and ending with </HTML> :
<HTML>
<HEAD>
<META NAME="Description" CONTENT=" Description of your web page ">
<META NAME="KEYWORDS" CONTENT=" Keywords that best describe your web page separated with a comma. ">
<TITLE> Your Page Title </TITLE>
</HEAD>
<BODY>
This area will contain everything that will be visible through a web browser such as text and graphics.
</BODY>
</HTML>
<HTML> - Begins your HTML document
<HEAD> - Contains information about the page such as, the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout and JavaScript coding for special effects.
<TITLE> - The TITLE of your page. This will be visible in the title bar of your visitors' browser.
Note: Make sure you include your most relevant keyword phrase within your "title" for Search Engine indexing. A keyword phrase is two or more words that best describe your website. For example, if your website focuses on "grooming dogs" then your best keyword phrase will be "dog grooming."
</TITLE> - Closes the <TITLE> tag.
</HEAD> - Closes the <HEAD> tag.
<BODY> - This is where you will begin writing your document.
</BODY> - Closes the <BODY> tag .
</HTML> - Closes the <HTML> tag.
Basic Text Elements
<B> tags create Bold Text
<B> Example </B>
<I> tags create Italic text
<I> Example </I>
<U> tags create Underlined text
<U> Example </U>
Color Codes
If you would like to specify a certain text or background color, you can do so by using color codes.
R G B color codes are represented as hexadecimal values. The RGB color codes contain three sets of numbers representing the amount of Red , Green and Blue contained in a color. These codes must be used within your HTML to specify your selected colors.
Now, to put the above statement in English...if you'd like to display your text in a certain color, you must include the hexadecimal color code within your font tag. Each color has its own color code.
Here are a few of the basic color codes:
| Black |
#000000 |
| White |
#FFFFFF |
| Red |
#FF0000 |
| Green |
#00CC00 |
| Blue |
#0000FF |
| Yellow |
#FFFF00 |
Example:
<font color="#FF0000"> Example </FONT>
<font color="#00CC00"> Example </FONT>
<font color="#0000FF"> Example </FONT>
Creating Links
In order to navigate a web page, you must create links. Links are created with an anchor, an href attribute and a URL (Uniform Resource Locator). URL's provide the browser with the location of the link, the name of the file and the method in which to access the file.
Example:
<A HREF="http://www.domain.com/"> Link Text </A>
When you begin writing your HTML code, all of your codes
will be placed between your <BODY> and </BODY> tags, as
this is the only part of your web page that will be viewed
through a web browser.
You can find an HTML code chart here:
http://www.web-source.net/html_codes_chart.htm
This chart will provide you with all of the basic HTML
codes, descriptions and examples to assist you in creating
your web page.
Although this article provides you with a very basic
overview of HTML, with the help of 1st Page 2000 and
the HTML code chart mentioned above, you can easily begin eBook Starter learning how to create your own web pages.
Copyright © Shelley Lowery 2002.
About the Author:
This article was adapted from the highly acclaimed ebook series, Web Design Mastery. Web Design expert and author Shelley Lowery's latest ebook is an in-depth guide to professional web design that is rapidly becoming known as the "Bible" for professional web design. http://www.webdesignmastery.com
If HTML is Too Much for you - Consider Cheap Web Templates!
Making and Controlling HTML Lists You make lists every day - shopping lists, "things to do" lists, people to call lists. Indeed, lists are a very important part of our lives. That's why when HTML was developed, its programmers just couldn't help it - they created a way to add a list to a web page. There are three kinds of lists that you can create: - Unordered - Ordered - Definitions Oops, another list right there! :-) 1) Here is the HTML code for creating Unordered list:
<UL>
<LI> Sour cream
<LI> Spagetti
<LI> Pancakes
</UL>
Produces this on a web page:
- Sour cream
- Spagetti
- Pancakes
The above code will simply create a list of bulleted items (bullets are small dots next to each item - sort of a check mark).
2) When it is important for you to list items in a particular order, create a numbered - or Ordered - list: Obviously, order of items is important here (you don't want to bake the batter that hasn't been mixed yet :-) Finally, the Definition lists. They are most often used when you have a list of items to be defined or explained. Use <dl> and </dl> to start and end your list.
<dt> will stand for "term" and <dd> will stand for "definition".
Using the previous cake baking topic, here is an example of a Definition list:
<dl>
<dt> Mix the batter: <dd> Make sure to mix it until well blended or the cake will be lumpy <dt> Put it in the oven: <dd> You may need to rotate it middle of the baking cycle <dt> Bake for 20 minutes: <dd> Baking time may vary. Start checking in about 15 minutes. </dl>
When you're creating a complex list, with sub-items, you may use nested lists (list inside another list) and mix different kinds of lists together. Experiment with different combinations of lists to see what is the best way for you to organize items on your web page. And here is the frosting! Hey, I bet even experienced webmasters might have missed the real flexibility of lists.
Every Ordered list begins counting with "1" by default. Every time you create a list, it automatically displays "1" as the first item. But what if you don't want a list to start with "1"? Is it possible for you to control what number it starts counting at? Let's say you are explaining different features of a product on your web page. You list the first 3 features, but then would like to stop for a moment and talk a little more about the 3rd feature. You have to end the list by using the tag.
Then you will add the extra explanation about it in the next 2-3 paragraphs. Now, you want to continue with your list. Oops! But you already closed it. If you start a new list, it will automatically begin with "1" again. But you need it to start with "4", right? Here is what you do:
<ol>
<li value="4">
- This item will be number 4 <LI>
- The next one will be 5 and so on.
</ol>
All I did was add the word "value" and gave it a number. That number will start your list, and all the following list items will be counted from there. And here is the sprinkles on the frosting. And this will REALLY blow you off! In an Unordered list bullets look different in each browser. If you would like to have control over how bullets look on your web site, you can specify their type (options are - square, circle, and disc):
<ul>
- <li type=disc> This item has a black circle bullet
- <li type=circle> The next one has empty circle as a bullet
- <li type=square> The last one looks like a square
</ul>
So there you have it. Three types of lists that you can mix, match, combine and completely control with enough practice and experimentation. Use them often. Especially when you have long web pages filled with text. Be easy on your readers' eyes and they will be more likely to read what you have to say.
Using Unicode to display symbols in HTML
Have you noticed how many web sites are showing unicode in the visible page text in place of punctuation marks? I've seen it on major newspaper sites and even on monstrous portals like Yahoo. I don't know whether this comes from ignorance of the site maintainer, bad content management software, cutting and pasting directly from word processing software, or all of the above - but it can be incredibly annoying.
Reading becomes nearly impossible when you find the unicode HTML string for apostrophe ' or quote " marks inserted within, or bracketing a word. If you haven't seen it here’s an “example” for everyone's mutual annoyance!
Some sites are using unicode characters for periods and question marks. While it is possible to use unicode to represent all of the alphabet, numbers, punctuation and most symbols - it just isn't necessary to do so. Beyond that, those who are still using older browser versions will see that code on the page, instead of the characters intended to display. I've posted a complete chart of unicode characters and the HTML equivalent chart.
If you'd like to know more about Unicode visit the authority site at < http://www.Unicode.org >
I would encourage those who maintain their web site or those of clients to reference the proper use of those characters in your code on your web pages. If your web page software is displaying this code visibly, your software is outdated or incompatible with current standards.
Sometimes software is the enemy when updating pages. If you cut and paste text from a Microsoft Word document into a non Microsoft web page editor, it will sometimes use proprietary code from that word processing software attempting to represent it as text or simply paste unreadable gibberish into the document. It's better to work in the Notepad plain text editor, rather than Word, if you will be pasting that text into a web page in any software other than another Microsoft product.
Microsoft has built all of it's software to recognize the proprietary code from each of it's other products. Outlook Express, to Internet Explorer, to Word, to Excel in each of the others within the family of Microsoft products. But as soon as you attempt to cut and paste text from a Microsoft product to a web page or any non Microsoft software, you will suddenly get strange characters appearing in the text of pages that don't recognize the Microsoft proprietary code.
It's not just a Microsoft problem, it also occurs when cutting and pasting from other proprietary word processing software product into web pages or email products NOT displayed in the same code base.
Unicode can be useful in web pages when the @ symbol displayed unicode equivalent of @ is posted to a web page to stop the spambot harvesting software from gathering useful email addresses from web pages. This trick is not always effective but does stop some harvesting software from recognizing those unicode symbols as valid email addresses.
I spend quite a bit of time in plain text editors like NotePad writing documents that will be transferred to a web page. The transfer of formatting simply won't work from Word documents to a web page. Some word processing software offers the command "Save As HTML" but not all work flawlessly. Some products don't present these web pages properly in all browsers.
Even worse is the amount of code clutter created when a Word document is saved as a web page using the "Save As HTML" command in that software (Word). I won't burden you with showing that clutter here. Dreamweaver web design software actually has a command labeled "Clean up Word HTML" to rid the code of extraneous and unnecessary clutter created by Word during that "Save as HTML" command.
We've made available a very simple Text to HTML Converter for Web Publishing that allows simple conversions of plain text documents to HTML without adding unicode characters to visible text.
This great tool automates these normally tedious tasks for web publishing:
- Adds mailto: to email addresses
- Inserts paragraph tags <p>
- Allows ordered lists or bullets
- Adds clickable hyperlinks to URL's
- Sets headings to bold text
- Allows links to open in new window
All of this without inserting unicode characters into that text as some content management software does.
Web content creators need to know - and actually write HTML sometimes. I hope this Unicode chart will help toward that end.
Just be sure that you are inserting that code into the HTML and NOT into the visible page text by becoming familiar with your software.
Character Unicode HTML 4.0
Character Name
|
  |
|
space |
| ! |
! |
|
exclamation mark |
| " |
" |
" |
quotation mark |
| # |
# |
|
number sign |
| $ |
$ |
|
dollar sign |
| % |
% |
|
percent sign |
| & |
& |
& |
ampersand |
| ' |
' |
|
apostrophe |
| ( |
( |
|
left parenthesis |
| ) |
) |
|
right parenthesis |
| * |
* |
|
asterisk |
| + |
+ |
|
plus sign |
| , |
, |
|
comma |
| - |
- |
|
hyphen-minus |
| . |
. |
|
full stop |
| / |
/ |
|
solidus |
| 0 |
0 |
|
number zero |
| 1 |
1 |
|
number one |
| 2 |
2 |
|
number two |
| 3 |
3 |
|
number three |
| 4 |
4 |
|
number four |
| 5 |
5 |
|
number five |
| 6 |
6 |
|
number six |
| 7 |
7 |
|
number seven |
| 8 |
8 |
|
number eight |
| 9 |
9 |
|
number nine |
| : |
: |
|
colon |
| ; |
; |
|
semicolon |
| < |
< |
< |
less-than sign |
| = |
= |
|
equals sign |
| > |
> |
> |
greater-than sign |
| ? |
? |
|
question mark |
| @ |
@ |
|
commercial at |
| A |
A |
|
Capital letter A |
| B |
B |
|
Capital letter B |
| C |
C |
|
Capital letter C |
| D |
D |
|
Capital letter D |
| E |
E |
|
Capital letter E |
| F |
F |
|
Capital letter F |
| G |
G |
|
Capital letter G |
| H |
H |
|
Capital letter H |
| I |
I |
|
Capital letter I |
| J |
J |
|
Capital letter J |
| K |
K |
|
Capital letter K |
| L |
L |
|
Capital letter L |
| M |
M |
|
Capital letter M |
| N |
N |
|
Capital letter N |
| O |
O |
|
Capital letter O |
| P |
P |
|
Capital letter P |
| Q |
Q |
|
Capital letter Q |
| R |
R |
|
Capital letter R |
| S |
S |
|
Capital letter S |
| T |
T |
|
Capital letter T |
| U |
U |
|
Capital letter U |
| V |
V |
|
Capital letter V |
| W |
W |
|
Capital letter W |
| X |
X |
|
Capital letter X |
| Y |
Y |
|
Capital letter Y |
| Z |
Z |
|
Capital letter Z |
| [ |
[ |
|
left square bracket |
| \ |
\ |
|
reverse solidus |
| ] |
] |
|
right square bracket |
| ^ |
^ |
|
circumflex accent |
| _ |
_ |
|
low line |
| ` |
` |
|
grave accent |
| a |
a |
|
Lowercase letter a |
| b |
b |
|
Lowercase letter b |
| c |
c |
|
Lowercase letter c |
| d |
d |
|
Lowercase letter d |
| e |
e |
|
Lowercase letter e |
| f |
f |
|
Lowercase letter f |
| g |
g |
|
Lowercase letter g |
| h |
h |
|
Lowercase letter h |
| i |
i |
|
Lowercase letter i |
| j |
j |
|
Lowercase letter j |
| k |
k |
|
Lowercase letter k |
| l |
l |
|
Lowercase letter l |
| m |
m |
|
Lowercase letter m |
| n |
n |
|
Lowercase letter n |
| o |
o |
|
Lowercase letter o |
| p |
p |
|
Lowercase letter p |
| q |
q |
|
Lowercase letter q |
| r |
r |
|
Lowercase letter r |
| s |
s |
|
Lowercase letter s |
| t |
t |
|
Lowercase letter t |
| u |
u |
|
Lowercase letter u |
| v |
v |
|
Lowercase letter v |
| w |
w |
|
Lowercase letter w |
| x |
x |
|
Lowercase letter x |
| y |
y |
|
Lowercase letter y |
| z |
z |
|
Lowercase letter z |
| { |
{ |
|
left curly bracket |
| | |
| |
|
vertical line |
| } |
} |
|
right curly bracket |
| ~ |
~ |
|
tilde |
|
127 |
|
(not used) |
| € |
€ |
€ |
euro sign |
|
129 |
|
(not used) |
| |
‚ |
‚ |
single low-9 quotation mark |
| ? |
ƒ |
ƒ |
Lowercase letter f with hook |
| |
„ |
„ |
double low-9 quotation mark |
| |
… |
… |
horizontal ellipsis |
| |
† |
† |
dagger |
| |
‡ |
‡ |
double dagger |
| ? |
ˆ |
ˆ |
modifier letter circumflex accent |
| |
‰ |
‰ |
per mille sign |
| S |
Š |
Š |
Capital letter S with caron |
| |
‹ |
‹ |
single left-pointing angle quotation mark |
| ? |
Π|
Π|
Capital ligature OE |
|
141 |
|
(not used) |
| Z |
Ž |
|
Capital letter Z with caron |
|
143 |
|
(not used) |
|
144 |
|
(not used) |
| |
‘ |
‘ |
left single quotation mark |
| ' |
’ |
’ |
right single quotation mark |
| |
“ |
“ |
left double quotation mark |
| |
” |
” |
right double quotation mark |
| |
• |
• |
bullet |
| |
– |
– |
en dash |
| |
— |
— |
em dash |
| ? |
˜ |
˜ |
small tilde |
| |
™ |
™ |
trade mark sign |
| s |
š |
š |
Lowercase letter s with caron |
| |
› |
› |
single right-pointing angle quotation mark |
| ? |
œ |
œ |
Lowercase ligature oe |
|
157 |
|
(not used) |
| z |
ž |
|
Lowercase letter z with caron |
| Y |
Ÿ |
Ÿ |
Capital letter Y with diaeresis |
|
  |
|
no-break space |
| ¡ |
¡ |
¡ |
inverted exclamation mark |
| ¢ |
¢ |
¢ |
cent sign |
| £ |
£ |
£ |
pound sign |
| ¤ |
¤ |
¤ |
currency sign |
| ¥ |
¥ |
¥ |
yen sign |
| ¦ |
¦ |
¦ |
broken bar |
| § |
§ |
§ |
section sign |
| ¨ |
¨ |
¨ |
diaeresis |
| © |
© |
© |
copyright sign |
| ª |
ª |
ª |
feminine ordinal indicator |
| « |
« |
« |
left-pointing double angle quotation mark |
| ¬ |
¬ |
¬ |
not sign |
| |
­ |
­ |
soft hyphen |
| ® |
® |
® |
registered sign |
| ¯ |
¯ |
¯ |
macron |
| ° |
° |
° |
degree sign |
| ± |
± |
± |
plus-minus sign |
| ² |
² |
² |
superscript two |
| ³ |
³ |
³ |
superscript three |
| ´ |
´ |
´ |
acute accent |
| µ |
µ |
µ |
micro sign |
| ¶ |
¶ |
¶ |
pilcrow sign |
| · |
· |
· |
middle dot |
| ¸ |
¸ |
¸ |
cedilla |
| ¹ |
¹ |
¹ |
superscript one |
| º |
º |
º |
masculine ordinal indicator |
| » |
» |
» |
right-pointing double angle quotation mark |
| ¼ |
¼ |
¼ |
vulgar fraction one quarter |
| ½ |
½ |
½ |
vulgar fraction one half |
| ¾ |
¾ |
¾ |
vulgar fraction three quarters |
| ¿ |
¿ |
¿ |
inverted question mark |
| À |
À |
À |
Capital letter A with grave |
| Á |
Á |
Á |
Capital letter A with acute |
| Â |
 |
 |
Capital letter A with circumflex |
| Ã |
à |
à |
Capital letter A with tilde |
| Ä |
Ä |
Ä |
Capital letter A with diaeresis |
| Å |
Å |
Å |
Capital letter A with ring above |
| Æ |
Æ |
Æ |
Capital letter AE |
| Ç |
Ç |
Ç |
Capital letter C with cedilla |
| È |
È |
È |
Capital letter E with grave |
| É |
É |
É |
Capital letter E with acute |
| Ê |
Ê |
Ê |
Capital letter E with circumflex |
| Ë |
Ë |
Ë |
Capital letter E with diaeresis |
| Ì |
Ì |
Ì |
Capital letter I with grave |
| Í |
Í |
Í |
Capital letter I with acute |
| Î |
Î |
Î |
Capital letter I with circumflex |
| Ï |
Ï |
Ï |
Capital letter I with diaeresis |
| Ð |
Ð |
Ð |
Capital letter Eth |
| Ñ |
Ñ |
Ñ |
Capital letter N with tilde |
| Ò |
Ò |
Ò |
Capital letter O with grave |
| Ó |
Ó |
Ó |
Capital letter O with acute |
| Ô |
Ô |
Ô |
Capital letter O with circumflex |
| Õ |
Õ |
Õ |
Capital letter O with tilde |
| Ö |
Ö |
Ö |
Capital letter O with diaeresis |
| × |
× |
× |
multiplication sign |
| Ø |
Ø |
Ø |
Capital letter O with stroke |
| Ù |
Ù |
Ù |
Capital letter U with grave |
| Ú |
Ú |
Ú |
Capital letter U with acute |
| Û |
Û |
Û |
Capital letter U with circumflex |
| Ü |
Ü |
Ü |
Capital letter U with diaeresis |
| Ý |
Ý |
Ý |
Capital letter Y with acute |
| Þ |
Þ |
Þ |
Capital letter Thorn |
| ß |
ß |
ß |
Lowercase letter sharp s |
| à |
à |
à |
Lowercase letter a with grave |
| á |
á |
á |
Lowercase letter a with acute |
| â |
â |
â |
Lowercase letter a with circumflex |
| ã |
ã |
ã |
Lowercase letter a with tilde |
| ä |
ä |
ä |
Lowercase letter a with diaeresis |
| å |
å |
å |
Lowercase letter a with ring above |
| æ |
æ |
æ |
Lowercase letter ae |
| ç |
ç |
ç |
Lowercase letter c with cedilla |
| è |
è |
è |
Lowercase letter e with grave |
| é |
é |
é |
Lowercase letter e with acute |
| ê |
ê |
ê |
Lowercase letter e with circumflex |
| ë |
ë |
ë |
Lowercase letter e with diaeresis |
| ì |
ì |
ì |
Lowercase letter i with grave |
| í |
í |
í |
Lowercase letter i with acute |
| î |
î |
î |
Lowercase letter i with circumflex |
| ï |
ï |
ï |
Lowercase letter i with diaeresis |
| ð |
ð |
ð |
Lowercase letter eth |
| ñ |
ñ |
ñ |
Lowercase letter n with tilde |
| ò |
ò |
ò |
Lowercase letter o with grave |
| ó |
ó |
ó |
Lowercase letter o with acute |
| ô |
ô |
ô |
Lowercase letter o with circumflex |
| õ |
õ |
õ |
Lowercase letter o with tilde |
| ö |
ö |
ö |
Lowercase letter o with diaeresis |
| ÷ |
÷ |
÷ |
division sign |
| ø |
ø |
ø |
Lowercase letter o with stroke |
| ù |
ù |
ù |
Lowercase letter u with grave |
| ú |
ú |
ú |
Lowercase letter u with acute |
| û |
û |
û |
Lowercase letter with circumflex |
| ü |
ü |
ü |
Lowercase letter u with diaeresis |
| ý |
ý |
ý |
Lowercase letter y with acute |
| þ |
þ |
þ |
Lowercase letter thorn |
| ÿ |
ÿ |
ÿ |
Lowercase letter y with diaeresis |
If HTML is Too Much for you - Consider Web Based Site Builders! |
