Welcome...Teach yourself HTML


If you leave this page, use the "BACK" key to return
DO NOT close the window.


Click on "View" then "Source" to reveal the source code (webpage instructions) for this site.
For your ouwn webpage...

From this page, find the source code info that you need, copy it, and paste it
into the body of your index file ... then make changes as needed to the code on your site.


This page is best viewed on Microsoft Explorer
It will work OK on Netscape, but Explorer is better.


Let's get started:
If you need a website, you'll need a hosting service.
  Try http://webhosting.yahoo.com
You can upload pictures easily and you can configure your webpage online
 (instead of composing your text on your notepad and uploading the page)
This is good and easy, but you should copy and save your work periodically
  since you are changing your webpage in real time...once changes are made, the webpage is changed forever.

Before signing up for the web hosting,
go and buy yourself a domain name.
This will be your www address.
Try www.inexpensivedomains.com
Once your domain name is bought, you'll need to configure it, so that it will go to your web hosting location when accessed on the internet.
InexpensiveDomains and Yahoo web hosting can help you with that later.

All websites MUST have an index.html file
This is the file that the website initially accesses for instructions
(when you start a new account, an index.html page is automatically generated for you)
(as a matter of fact, it's the only file in the website)
Without a properly coded index.html or index.htm page, you have no website
A html page has codes that give directions to the browser
The index.html page is the first page that opens up at the website.





other types of files are xxxx.html (text files)
other types of files are xxxx.jpg (pictures) (jay peg)
other types of files are xxxx.gif (images) (jiff)

HTML (Hyper Text Markup Language) uses bracketed tags (commands)

HTML generators are also available to set up webpages (Microsoft Frontpage)
We will be setting up these pages from scratch ... line by line.


LINE BREAK - the <br> or <br/> command (not always case-sensitive, but best to keep it lower-case)
this is the start of the first lesson. this is the first line of the text. text will wrap around unless otherwise instructed by html commands. It doesn't know when to stop unless otherwise commanded. Why does it not space these lines? It does not recognize spacing in the code (white space means nothing), it needs to have commands.

this is the start of the lesson.
this is the first line with a break.
text will obey the commands that are in the brackets.
These codes (instructions) within the brackets are HTML codes.
may use the BREAK command


in succession for extra line spacing.




DISPLAY IT LIKE YOU TYPE IT !!!
If you want to display exactly what is typed onto the webpage, use the <pre> and </pre> command between
the text to tell it to display it as it was typed.

These next few lines are preformatted text
  White space is recognized and respected
     No special codes needed for indents or breaks, etc.
                 This uses monotype text






PARAGRAPH commands: <p> command

Paragraph command is similiar to break command. Automatic break inserted at start of new Paragraph. Closing command </p> for the paragraph command is not necessary in html, but necessary in other languages

This is the second paragraph with closing command

This is the third paragraph with no closing command - same results

It would be best to keep in the habit of using the close command






IMPORTANT:
Most commands will require that you insert a closing command.
This closing command indicates when the command is to be terminated

Example: I want to make only one word in this line to be BOLD.
The closing command, tells where the command is to end

Example: I want to make only one word in this line to be BOLD
Without the closing command, everything is affected until it finds the closing command ->


Start tag in front, and Close tag at end




Insert a Horizontal Rule <hr> for spacer/divider
A few horizontal rules below:









BOLD and ITALICS

For BOLD text, use the "b" and "/b" commands.
or use STRONG commands.

For Italics text, use the "i" commands.
or use Emphasis commands.

Use in tandem: Strong and Emphasized
Use in tandem: Bold and Italicized





BLOCKQUOTES
Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes.





TEXT PLACEMENT
Flush left is automatic

For flush right, use the paragraph command with alignment qualifier.

This command makes the text flush right. All text after this command will be aligned to the right. To Stop flush right, use the paragraph close command.

This command makes the text centered. All text after this command will be aligned to the left. To Stop this command, use the paragraph close command.

You can also use the center command to make all
following text centered until the close command.
You can use this command at any time
without make a new paragraph.
Use the break command to break up the text into manageable lines.






(a Hidden Bookmark is below in the source code - see hyperlink info later)
LETTER SPACING - "&nbsp;" Command

"&nbsp;" between words or letters to provide extra blank space

Must use html command to provide space between words.
Must use html command to provide space between     words.

White space means nothing in html.
also see the "SYMBOLS and CHARACTERS" section




(a Hidden Bookmark is below in the source code - see hyperlink info later)
FONT SIZE
use the font size command to make bigger letters
must have closing command

use the font size command for 1 size
use the font size command for 2 size
use the font size command for 3 size
use the font size up to 7 size
use the font size command for larger +1 size
use the font size command for larger +2 size
use the font size command for larger +3 size
use the font size command for larger +4 size

use the header command for larger H1 letters


use the header command for larger H2 letters


use the header command for larger H3 letters


use the header command for larger H4 letters


use the header command for larger H5 letters


Note: When using header commands, start with the largest header
on the webpage first, then you can use smaller header commands later on,
but not larger header text than the first header command on the webpage.




COLOR TEXT
use the color command to colorize the text
Make it RED
Make it GREEN
Make it a CUSTOM color - ff00ff Color
Make it a CUSTOM color - 8A2BE2 Color






FONT FACE
use the font face command to change the font type
font size +3 Standard no face command
font size +3 Impact face
font size +3 Arial face
font size +3 Verdana face
font size +3 Courier New face






OTHER FONT MODIFIERS
font size +3 BOLD
font size +3 ITALICS
font size +3 UNDERLINED
font size +3 TypewriterType
font size +3 BOLD, Italics, underlined, and RED





SYMBOLS and CHARACTERS
Sometimes, a symbol is needed in the main text.
Use the codes on the following list, in the body text, for the symbols.
<   >   "   ˜   &   †
Click here for list of symbol codes





LISTS
To create a list...
start with either "UL" (bullet list) or "OL" (numbered list) as the opening tag...and use the close tags for the line items and the list


    List of recognized colors (numbered list - in order "ol")
  1. Black
  2. White
  3. Blue
  4. Red
  5. Green
  6. Brown
  7. Yellow
  8. Gray
  9. Maroon
  10. Purple
  11. Teal
  12. Lime
  13. Aqua
  14. Navy
  15. Olive
  16. Silver
  17. Fushsia


Other types of lists:
Standard List with definitions (dl)
Entry one
definition one
Entry two
definition two


Compact List with definitions (dl compact)
Entry three
definition three
Entry four
definition four






IMAGES
Pictures must be downloaded first into website or located on a website.

Download a picture into your site .....
...From your Camera/Media/Disk
...From your "C" Drive
...From the internet (Right click on image, SAVE TO your "C" Drive)
Click "Upload Files" and load images onto your site.
Can also use images already on the internet without loading onto your site,
but must find out the "http" location for accessing that image.

Lets add an image (a jpg file) to our webpage...(name must be exact - case sensitive!!!)
NOTE: Keep the image file size smaller for the internet ....
Large files take a long time to load onto the webpage.


We are accessing this image and loading it onto our webpage.
We are going to load this image twice ....

2nd picture (little square above) did not appear because the file name was not capitalized properly. (case sensitive)

If the image is located on your site,
you can access it a couple of different ways ....
Using the entire http address to load image

or use only the filename since it's on your site ....


Let's resize previous picture ....

The relative proportions are off ... change the height and/or width size ...

This picture is "grainy", the image is a small low-resolution pix

Let's center a picture and add another picture .....

Let's resize for proper proportions ....


Lets rearrange the two pictures .....

A Ghoul, A Clown, and Bingo Game






Lets add a few gif file...




gif files are just like jpg files.
Find them on the web and copy to your "C" drive, then upload to your site.
...use break commands, and size commands










TEXT WRAP-AROUND

Without any alignment commands, text will start to the right of the image and wrap around. The align command refers to the location of the following text, not the location of the image




With ALIGN=RIGHT alignment commands, text will start to the LEFT of the image and wrap around. The align command refers to the location of the following text, not the location of the image








With ALIGN=LEFT alignment commands, text will start to the RIGHT of the image and wrap around. The align command refers to the location of the following text, not the location of the image















LINKS to other websites (hyperlink)
Use this command to send viewer to other sites ..... even your own sites !!!

Another Html Page on my site


To View Show Event Calendar: Click Here


For TV Listings: TV Listing






LINK to your EMAIL address

Send Me some Email: Email Me !!!






Link to a Different Location on same Page
Must "Bookmark" the area prior to linking back to that spot

Go to Font Size Section - Same page link
Go to Font Size Section - Hyperlink


Go to Different Location on Page (different bookmark)
Go to Letter Spacing Section - Same page link
Go to Letter Spacing Section - Hyperlink







SOUND Commands...
Upload sound file (mid, au, wav files) then ...



Ghostbusters !!!

Remember: use BACK button to get back here, DO NOT close windows





TEXT on POINTER

Descriptive Text on your Cursor/Pointer ... "alt" or "title" attribute
Place your cursor over the picture or the "Click Here" hyperlink
Pretty Picture
Click Here


Place curser on either the picture or "Home Page".
This will take you back to the homepage (the index)
This is a hyperlink using a "clickable" image or text

Click to Link to Homepage

Home Page






Marquees

Thanks for visiting our Website !!!
I Love You !!! I Love You !!!
Another Marquee !!!


Try using Marquees !


Stay Tuned ...


This Text Slid to the Left then Stopped ...








Insert a TABLE:
"TR" is for new table row
"TD" is for new table data


Data No. 1 Data No. 2
Data No. 3
Data No. 4


Column 1
Column 2
Column 3
Column 4
Data No. 1 Data No. 2 Data No. 3 Data No. 4
Data No. 5 Data No. 6 Data No. 7 Data No. 8


Can also use IMAGES as data:
Data and/or Images can be used as hyperlinks ....
(Note: Keep image sizes small - resize images first
clickable image is small thumbnail size photo ... low resolution)


Picture of
Room with Chair

Picture of
Baby

Picture of
Eric
Click Here for
picture of
Room with Chair

This links to
another webpage

This links to
another image






Have Fun with your webpage ... check the SOURCE code !!!
Find the type of code that you want to use, copy it,
paste it into your index,
and change the text of the code as needed.





RGB Color Codes and Names

****


White

Yellow
* 
Teal

Lime
* 
Olive

Silver

Aqua
* 
Gray
* 
Green
* 
Brown
* 
Black
* 
Blue
* 
Maroon
* 
Purple
* 
Navy
* 
Red
* 
Fushsia
* 
Pink
40e0d0 
GREEN ROOM
40e0d0 
GREEN ROOM
800000 
maroon
8B0000 
darkred
FF0000 
red
FFB6C1 
lightpink
DC143C 
crimson
DB7093 
palevioletred
FF69B4 
hotpink
FF1493 
deeppink
C71585 
mediumvioletred
800080 
purple
8B008B 
darkmagenta
DA70D6 
orchid
D8BFD8 
thistle
DDA0DD 
plum
EE82EE 
violet
FF00FF 
fuchsia
FF00FF 
magenta
BA55D3 
mediumorchid
9400D3 
darkviolet
9932CC 
darkorchid
8A2BE2 
blueviolet
4B0082 
indigo
9370DB 
mediumpurple
6A5ACD 
slateblue
7B68EE 
mediumslateblue
00008B 
darkblue
0000CD 
mediumblue
0000FF 
blue
000080 
navy
191970 
midnightblue
483D8B 
darkslateblue
4169E1 
royalblue
6495ED 
cornflowerblue
B0C4DE 
lightsteelblue
F0F8FF 
aliceblue
F8F8FF 
ghostwhite
E6E6FA 
lavender
1E90FF 
dodgerblue
4682B4 
steelblue
00BFFF 
deepskyblue
708090 
slategray
778899 
lightslategray
87CEFA 
lightskyblue
87CEEB 
skyblue
ADD8E6 
lightblue
008080 
teal
008B8B 
darkcyan
00CED1 
darkturquoise
00FFFF 
aqua, cyan
48D1CC 
mediumturquoise
5F9EA0 
cadetblue
AFEEEE 
paleturquoise
E0FFFF 
lightcyan
F0FFFF 
azure
20B2AA 
lightseagreen
40E0D0 
turquoise
B0E0E6 
powderblue
2F4F4F 
darkslategray
7FFFD4 
aquamarine
00FA9A 
mediumspringgreen
66CDAA 
mediumaquamarine
00FF7F 
springgreen
3CB371 
mediumseagreen
2E8B57 
seagreen
32CD32 
limegreen
006400 
darkgreen
008000 
green
00FF00 
lime
228B22 
forestgreen
8FBC8F 
darkseagreen
90EE90 
lightgreen
98FB98 
palegreen
F5FFFA 
mintcream
F0FFF0 
honeydew
7FFF00 
chartreuse
7CFC00 
lawngreen
6B8E23 
olivedrab
556B2F 
darkolivegreen
9ACD32 
yellowgreen
ADFF2F 
greenyellow
F5F5DC 
beige
FAF0E6 
linen
FAFAD2 
lightgoldenrodyellow
808000 
olive
FFFF00 
yellow
FFFFE0 
lightyellow
FFFFF0 
ivory
BDB76B 
darkkhaki
F0E68C 
khaki
EEE8AA 
palegoldenrod
F5DEB3 
wheat
FFD700 
gold
FFFACD 
lemonchiffon
FFEFD5 
papayawhip
B8860B 
darkgoldenrod
DAA520 
goldenrod
FAEBD7 
antiquewhite
FFF8DC 
cornsilk
FDF5E6 
oldlace
FFE4B5 
moccasin
FFDEAD 
navajowhite
FFA500 
orange
FFE4C4 
bisque
D2B48C 
tan
FF8C00 
darkorange
DEB887 
burlywood
8B4513 
saddlebrown
F4A460 
sandybrown
FFEBCD 
blanchedalmond
FFF0F5 
lavenderblush
FFF5EE 
seashell
FFFAF0 
floralwhite
FFFAFA 
snow
CD853F 
peru
FFDAB9 
peachpuff
D2691E 
chocolate
A0522D 
sienna
FFA07A 
lightsalmon
FF7F50 
coral
E9967A 
darksalmon
FFE4E1 
mistyrose
FF4500 
orangered
FA8072 
salmon
FF6347 
tomato
BC8F8F 
rosybrown
FFC0CB 
pink
CD5C5C 
indianred
F08080 
lightcoral
A52A2A 
brown
B22222 
firebrick
000000 
black
696969 
dimgray
808080 
gray
A9A9A9 
darkgray
C0C0C0 
silver
D3D3D3 
lightgrey
DCDCDC 
gainsboro
F5F5F5 
whitesmoke
FFFFFF 
white
 
 
 
 
 
 
Click Here to Email me