"ALittleHTMLGuide" by Karen Mueller - Copyright 2006
.......................................................
.This guide is presented in TEXT format for a good reason.
.It will be easy to cut and paste the HTML commands into your
.own HTML files and just change what you need for your webpages!
.
Have FUN learning HTML yourself ;-) /Karen
.
*****************************alittlehtmlguide.txt***********************************
.
HyperText Markup Language is the main language understood/displayed by the Internet
browsers (IE, Netscape, Firefox, AOL, etc).
.
HTML "commands" are called tags. Tags have this format: (greater and less than
signs around it). Tags usually have a beginning tag, like for paragraph.
Tags are ended with
-- note the "/" in the ending tag.
Example:
Sometimes the ending tags can be left out, but it is safer to use them until you know
which ones are critical.
.
There have been several versions of HTML and more are available for specific browsers
but the basics are enough to get anyone started.
.
The default file displayed at a website, i.e. www.yourdomain.com,
is the index.html file.
(There are exceptions, but this works for now.)
So index.html is usually the HOME PAGE.
.
These 4 quick sections will get you started:
(A) Basic HTML file layout and text separation
(B) Text formatting
(C) Links (Internal and External)
(D) Graphics (adding .jpg and .gif files)
(E) Tables (most common graphic webpage layout method)
(F) TIP: View Source
===================================================================
.
(A) Basic HTML file layout and text separation
.
The basic layout of an HTML file is below. I added text to show some
text separation methods.
..............................................................
this title appears on the browser bar
this is the largest heading
this is a smaller heading
Here is my first line of text.
This line is broken by the "br" tag,
so it appears on the next line, even if it is written together like this.
When lines are too long, they will automatically "wrap" to fit the width
of the page (or table cell, more later). Otherwise,
you can type on and on in a paragraph and it would just keep wrapping.
There would be an empty line before this line cuz it's a new paragraph.
The space above doesn't do anything. In fact, this line would be
displayed as part of the above paragraph, so the paragraph tag is the
primary separation tag in text.
The "hr" tag is a hard rule line, kinda like the dashed line here.
----------------------------------------------------------------
Notice that ,
, and
do NOT have ending tags like "".
These are the main tags that rarely need an ending tag when used in
the typical fashion. Put ending tags on ALL other tags.
.
When you are done typing the basic layout and text,
You would end the body and the HTML file with their ending tags:
.................................................................
.
NOTE about CAPS: tags are not case sensitive, meaning it doesn't matter
if you use caps. I recommend that you do not so that you can more easily
"see" your HTML commands within your actual content, which, of course,
should be properly formatted, spelled correctly, and capitalized where needed.
.
NOTE about
tag: I have seen the
tag not work properly. I had
in a few webpages and the text and graphics under it on
the displayed webpage did not display properly until I removed the
tag.
I haven't researched why this is, but it's simple to remove it when it
does not work.
.
NOTE about options: As in the
tag, you can see there
are options for tags. You will learn what you need to use for your webpage
very simply. I won't distract you with all the options now, but read the
TIP below for more information after you have digested these basics.
For instance:
It is common to modify the to include a background-color
(default is white), color (text, which is black), or background
graphic file. The default formatting for the whole webpage can be
modified here, but that is not necessary for this guide. Someday
look up CSS, or Cascading Style Sheets to see how webpages are typically
formatted today.
===================================================================
.
(B) Text formatting
.
Just some basics because formatting could be a book in itself:
.
The tag changes the text display from a default of black
Times New Roman, size "1" to your preferred font display. Here are examples:
.
red Arial text
.
The H1 and H2 tags are Header tags. They are by default,
larger than normal text and bold face. In fact there are six levels
of heading tags
.
Note: Six headers is the most I've seen. There could be more. My first
HTML manual said there were four, so "changes" are on-going in HTML support,
for various natural reasons. Before advanced styles were supported, it was
common to see default webpages with default text and one to four heading
lines, a few blue underlined links, and a graphic or two. The font was
often designated by size="1", size="2", etc. Each header defaulted to
one size larger than the other.
.
is the bold tag. It is a helpful tag to bold a phrase within
a paragraph. The former sentence would have "bold a phrase" as bolded text.
.
is the italics tag
is the underline tag
.
NOTE: BE SURE to use the closing tags!!! You can see clearly when you
have forgotten them. (Like all the text below the will be italicized
when you forgot.
.
NOTE about COLOR: Colors are designated several ways. Red, yellow, blue,
green, purple, black, white, and several more words are available. You
can also use HEX or RGB codes. I find HEX meets my needs and grab the
color code from my graphics program. For instance color="#ffffff" is
white and color="#000000" is black. HEX codes are cryptic and you need
a chart or tool. Check MyMinisites.net for a color chart to find more
colors for your web pages.
.
===================================================================
.
(C) LINKS:
.
All other webpages on your website need to be "linked" by their name,
like mysecondpage.html. That would be an internal link. So index.html
can call mysecondpage.html with this code:
.
my second page
.
Notice the "tag" contains the href="filename", then is ended with
. Between the "a" tags is the text which is underlined (usually).
When clicked in the browser, mysecondpage.html would be displayed. If
just one < or > is missing, the link doesn't work and the page is
"messed up". This is true for most "tags", so watch them carefully.
Also the quotes around the filename are important. This is an Internal LINK.
.
External LINKS are outside of your website (on other websites), so
they need the whole external "path", like this:
this is
mysecondpage at yourdomain.com
So, my website can call your second page with that link code!
Or it can call the main/home page of any site with this:
this is the homepage at
yourdomain.com
.
Another handy link is the mailto link. Using this code will
start up the default mail utility and place the recipient in the
To: field. The underlined text would be "Email me here"
Email me here
.
===================================================================
.
(D) Graphics
.
Graphics break up your text and make your web page interesting.
They can be OVERDONE though. It has been proven that most Internet
visitors do not want "busy" graphics to distract them from the content.
You want "enough" visual impact, but not too much.
.
Most graphics on the web are of file types .jpg and .gif. Usually
photographs are .jpg files and .gif are drawings. Gifs can also be
animated which means they are actually more than one drawing that is
saved such that they "move" or change within a time setting. Gif
animator tools are available on the web if you want to make your
own, but you can find free animated gifs everywhere too.
.
Two skills will help you work with graphics to get them ready to
display on your webpage.
1) When you see a graphic that you would like to use on your PC
(in email or browser typically), you can usually right-click and
SAVE PICTURE AS into a folder on your PC. You can overtype the name
you want to give it also. When this does not work, it is due to the
programmer blocking this feature from you. Always BEWARE of copyright
and get permissions to use graphics that are not free.
2) Resizing graphics to "fit" on your webpage is a feature of
graphics software. Many packages are available; some are expensive,
but you can also find them for $20 with free trials. If you have
photographs from a digital camera, they may need to be resized.
Usually you can set the resize tool to a percentage of the original.
You can also "crop" out the parts of the photograph that you don't
need. The crop tool usually presents a "rectangle" for you to move
and stretch as needed until you find exactly the right part of the
picture you want to save.
.
Once your graphic is saved into your working folder with your
HTML file, you use the ![]()
tag to display it.
.
is the simple form of this tag.
NO CLOSING tag is used, i.e. don't use ()
.
Options can be used to add a border or not display a border with this code:
(or border=1, will display a border)
.
Width and height options can be used, but are not necessary
if the graphic is already the correct size.
.
While most browsers will display your pictures larger or
smaller with these options, the picture might look distorted.
Also if your file is actually 600x800 and you display it as
200x300 with the options, the browser will still have to load
that large graphic and the time it takes to load large graphics
will delay the display of your web page. It is better to resize
your graphics first.
.
Another handy option is ALIGN. You can align your image within
text to create a wrap around effect, placing your image in a
paragraph like this.
text goes here and
more text goes here and so on and so on.
.
The effect of the align=right will place the image on the
right of the web page text and wrap the text around it.
.
Experiment with the other align options to see how it displays.
align=right
align=left
align=middle
align=top
align=bottom
.
It will always depend upon the size of the image and the
text in the paragraph to determine how it "looks" in your
browser. It even depends upon the size of the window used
to display your web page, so experiment with several alignments
(and browser window sizes) to see what it looks like under
different settings. (This is why you want to Code/Test/Code/Test,
over and over again when creating your web page html file.)
.
GRAPHIC LINKS: These are easy. Just put the ![]()
tag in between
the and tags to have your graphic act as a link.
.
If you don't want a border around that .jpg when it is displayed, add the border=0 option:
.
===================================================================
.
(E) Tables
.
Tables are one of the most common ways to position information
and graphics on your web page. (Styles or CSS can also be used
and after you learn the basics of HTML, I encourage you to study
style commands more.)
.
Here is the basic table format:
.
is for table row
| is for table data
These need closing tags, and the "data" | stuff | is within
the
's and
's are within 's
.
It is the options of the table commands that give you power over your display.
.This "stuff" will have a yellow background.
.
More control is added with width options. This "stuff" is in a
300 pixel wide yellow rectangle.
.
Now add alignment and "stuff" will be centered.
.
Columns can be created by nesting tables and using the
valign=top option (vertical alignment). This displays
2 columns each 300 pixels wide.
|
stuff stuff stuff
|
more stuff or a graphic perhaps here
|
.
A little advanced, but you'll get the hang of it.
Separate the columns with cellspacing. This leaves
10 pixels between each column. Removing the alignment
will display the text with left justify as the default.
|
stuff stuff stuff
|
more stuff or a graphic perhaps here
|
.
Control the space in front of the "stuff" with cellpadding.
This adds 5 pixels in front of the words within the yellow
and blue columns, and looks nicer.
|
stuff stuff stuff
|
more stuff or a graphic perhaps here
|
.
You can create 3 or more columns too. Just add another
inside.
CAUTION: Most web pages are designed to be less than
800 pixels wide to display best on most settings. Be careful
not to make the total width of your columns plus cellspacing
(width between them) to add up to greater than the width of
your banner or total web page width desired.
.
NOTE: ALWAYS be sure to close every table tag, the | ,
,
for EACH open table tag, or it really looks
messed up when you test it.
.
MORE ADVANCED NESTED TABLES - Examine the following for more
possibilities:
.
I don't see many occasions where I need to nest one full table
within another, but you can do it. Just be sure to close all the
tags, and the nested table ALWAYS goes inside a - table data
tag. (Sometimes you want to place forms or affiliate links that
contain full tables inside your tables. That's usually when you need them.)
===================================================================
.
(F) TIP: View Source
.
This tip will come in handy if you plan to use HTML extensively.
You may want to learn more and see how other web page code works.
You can read the website's HTML code in most browsers with View/Source
(from the Toolbar). The html source displays in Notepad for you to see
how other programmers coded their website files and it can teach you
more HTML. (When it doesn't work, it is because the programmers use
a blocking script to keep their code hidden. You can too.)
.
Don't be intimidated if you see a bunch of complex, ill formatted HTML
code. Most of that hard-to-read code was created by website generators.
They are highly-sophisticated programs themselves, not real people.
If you look close, you can find some HTML code you will recognize.
.
.
Please contact me at webmaster@myminisites.net if you have any problems
with these instructions or comments for me.
-------
"I hope you enjoy HTML, like me!"
Karen
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
This file was created by Karen Mueller - Copyright 2006 - All Rights Reserved |