Web Page Help >>> HTML Tags Basics - Quick Reference

BASICS OF HTML DOCUMENT BACKGROUND COLOR & IMAGES

FORMATTING TEXT INSERTING IMAGES MAKING LINKS

I cannot stress enough, if you are writing your own HTML,
if you are not exact ... your links won't work, your page MAY not even show up!

thanks for supporting + visiting our sponsors

Web browers are case-insensitive to all HTML tags, so you may use
upper case or lower case
inside the tags as you prefer, just be consistant!
mixing cases won't work

However, file names (for hyperlinks and images)
ARE case-sensitive AND very unforgiving of 'typos',
and must appear within quotation marks.

If you put a space where there shouldn't be one,
if you leave out a / or a " or a > where there should be one,
and heaven forbid! if you forget to close your table with </TABLE>
your visitors will have problems viewing your page or connecting via your links.

BASICS OF A HTML DOCUMENT:

Every HTML tag MUST have a beginning and an end
{match up the beginning and ending: blue HTML, red HEAD, and hotpink BODY tags below}

<HTML>
<HEAD>
title, and meta tags, and other information about document - details below
</HEAD>
<BODY>
... document body - whatever you want to say, whatever graphics you want to show
</BODY>
</HTML>

Most HTML editors allow the web page author to easily put in a lot of information that is relative to search engines. From the editor's menu, choose: Properties, then Document, and fill in the boxes.

What goes between the "HEAD" tags:

thanks for supporting
+ visiting our sponsors

<HEAD>
<TITLE>HTML tags Basics - Web Page Help</TITLE>
<META NAME="Description" CONTENT="Web page help, HTML help and information, links to help and information>
<META NAME="KeyWords" CONTENT="help, how-to, HTML, web page help, HTML help.">
<META NAME="Author" CONTENT="Roxanne M. Flanagan">
</HEAD>

I used formatted text above, to emphasize that these EACH have to be on ONE line only, do not use breaks in text lines for these items!!
ALL OF THE ABOVE INFO -- MUST go at the TOP of your page,
between the <HEAD> and </HEAD>tags !
Note: look up ^ at the top of your browser ^. All pages should have a title, and if someone bookmarks your page, your title will be the name in their bookmark list, so choose your titles carefully!! If you title it "My Page" - they'll look at their bookmarks and not know WHO's page it is, or what it is about, and possibly delete it!! vs. if you title it "HTML tags Basics ~ Web Page Help" - they know!!

The meta tags are used by search engines to categorize your page, then when someone does a search on a topic, your page will be listed. If the topic of every one of your pages are different, then you should put in different meta tags for each page. The best place I've found to explain the meta tags, and how search engines work, is at Search Engine Watch and a Search Engine Tutorial. It is very difficult to get in the top 10 or 20 listings that show up in the search results. But there are ways, if you work at it, that will give you results, and that information is at the two places I mentioned here.

[return/top]

BACKGROUND COLOR:

After the head of an HTML page (which often has only the title) comes the body of the page, the part which is actually displayed in your visitor's browser window. This part is supposed to start with the tag <BODY> and end (at the bottom of the file) with </BODY>. It is inside the first of these tags that you indicate a background color using the BGCOLOR option:

<BODY BGCOLOR="#EC0000">

The 'EC0000' in this example can be replaced with any 6-hex-digit code. See my page HTML Colors for the 216 websafe colors (print it out, or save that page to your computer to have a reference handy)

BACKGROUND IMAGE:

<Background="imagename.gif">

Some Editors put a lot of info in that one line -- it's called "BodyTag Declarations" where you specify a lot of things regarding the entire page, in one area. Your choices are made under Properties | Document
I made the text size small in the example below, so you don't have to scroll accross the page. It is VERY IMPORTANT that this be ALL ON ONE LINE -- do NOT put a line break, or a carriage return here !!

If you want to use Geo's Advanced Editor for your page (or write your own html page in notepad), AND specify a background image, text colors, etc - just duplicate this next line, making your choices of colors, image, etc.

<BODY TEXT="#000000" BGColor #CAD7AA" LINK="#000000" ALINK="#000040" VLINK="#FF0000" BACKGROUND="ImageName.jpg">

See the page HTML Colors for the 6 digit hexdecimal (HTML) codes of the 216 websafe colors.

BODY TEXT = Your HTML page's regular/default text color. If YOU don't specify, your visitor's computer will choose the color, not always a great decision! Some people don't know how to control or change their default color. If their default color is a dark color, and your page has a dark color background, they won't see your text on your page!! Be sure to specify on each HTML document.

BGColor = The background color used if you aren't using an image, and the 'sub-background' color that shows before your background image loads. It's good to choose a color even when using an image, because if there is some reason the image doesn't "show up" (or if your visitor has 'images' turned off on their browser - a common practice) your sub-background color will be shown and your text will be readable. Again, if you don't choose one, and the image doesn't load, the color that will show as a background will be chosen by your visitor's computer (default background color). You have NO control over that -- it might choose a color same as your text color -- then nothing would show up!

LINK = The color you choose for the links (often different color than regular text)

ALINK = "Active" link, for Netscape 4x users, the instant that your visitor clicks on the link, it changes color to notify them of the activation of the link.
Netscape 4x users, to demonstrate, click on this link, you won't go anywhere (the link is set to bring your browser a couple of lines above this one). But, WATCH the text color change colors, as you click on the link.

VLINK = When a link has been followed, is often a different color than the regular link color, so visitors can easily tell what pages they've been to, and which ones they haven't visited yet.

BACKGROUND = The "ImageName" you are using for a background. Most often used is '.gif' or '.jpg' format images. Caution - most browsers can see .gif's and .jpgs -- don't try to use other image formats like .bmp, .tif, .wmf, etc. because they MOST likely won't show up for your visitors!

[return/top]

FORMATTING:

'Preformatted' text

<pre>
Preformatted text    appears just
as    typed into the
                HTML file, in typewriter font ---

including vertical and horizontal blanks
</pre>

Line-breaking, paragraph separation

Asside from preformatted text, Netscape does its own formatting of text; shrinking multiple blanks (vertical & horizontal) to a single space. It will break lines to fit the actual size of the Netscape window (change your window size and see how text gets reformatted!!). However, Netscape grants some control to the editor of the page, who can use any of several control tags. For instance, the page author can force a new paragraph with the tag 


One can break a line  
without inserting a blank line for a separate paragraph.


<center>centering</center>

Netscape and Internet Explorer will honor the <center> and </center> tags; The new HTML standard way to center a paragraph, is to use opening/closing paragraph tags with the align option:

centering

underline results will be: underline

bold results will be: bold

italic</> results will be: italic

Indentation

There is no standard way to indent the first line of a paragraph. Style sheetsmay provide a way to do that in the future, but, then you'd also have to wait until a majority of browsers could "view" style sheets before it's a good idea to use them.

However, the special character [   ] (non-breaking space) forces a space break, and can be used when you really, really, really, want to force a web browser to show:

extra blank space. Like this.

Just use as many       as you need, to create the effect you want.

An entire section of text can be indented on both left and right edges using the <blockquote> tag:

<BLOCKQUOTE>
A paragraph can be set off as a quotation, getting indentation on both left and right sides, by enclosing it in a pair of 'blockquote' tags. To be quoted, or not to be quoted, that is the question ...
</BLOCKQUOTE>

The REASON using blockquotes is better than the <UL> tag (it indents the text, too), is that NOT ALL browsers recognize <UL>. If your visitor is using a browser that doesn't - your text will land smack against the left side of the browser - and that's what you wanted to avoid in the first place, wasn't it??

You can also use tables to control how wide, and where, on the page it will show your text and graphics. I have this page's text in tables, several of them, so they load faster for my visitors. It keeps my text positioned the same for every visitor, no matter what size monitor, or what resolution they are using on their computer. For more information about those, see the Page Control page and the Resolution page.

[return/top]

INSERTING IMAGES:

IMG=image and SRC=source

Place an image on the page by inserting an 'image' tag, with the name of the file of the image (usually a .gif or .jpg file - ONLY the MSIE browser will display bitmaps), in the appropriate place on your page. The image tag is the ONLY tag that doesn't have a corresponding "ending" tag. File names are CaSe sENsitive! mailslot.gif is not the same as MailSLOT.GIF or as mAILslot.Gif ! Type carefully !

<img src="mailslot.gif">
shows:

Between the img and the src can come any of several options; (some examples below)

ALT="text" -- text, describing image, to be displayed if the image can't be, for visitors with certain computer systems, or with image display turned off. The new browsers will display your alt text when the curser is held over the image.
align=TOP -- to align the top of the image with any adjacent text
<IMG SRC="mailslot.gif" align="top"> example below
align=MIDDLE -- to center the image vertically with any adjacent text
<IMG SRC="mailslot.gif" align="middle"> example below
align=BOTTOM -- align the bottom of the image with adjacent text
<IMG SRC="mailslot.gif" align="bottom"> example below
aligned=top of letters aligned=middle aligned=bottom
see how the image lines up next to the words ... all three are slightly different. You would see a big difference when using a larger graphic!
align=RIGHT -- put the image at far right; text flows around the left side
<IMG SRC="mailslot.gif" align="right"> example below
align=LEFT -- put the image at far left; text flows around the right side
<IMG SRC="mailslot.gif" align="left"> example below
The following demos the mailslot with HTML tags to have it

align left

align center

align right

HSPACE=5 and VSPACE=5 -- will put a 5 pixel space, horizontally and vertically, around the image to keep text away from it (adjust to preferences)
<IMG SRC="mailslot.gif" ALT="mailslot" HSPACE=5 VSPACE=5 HEIGHT=11 WIDTH=32> Here is the mailslot with the HSPACE, VSPACE,
to show the extra "space"

around the image.

width=300 height=184 -- only if you know the exact size of the image, in pixels. You can check that in a graphics program, or if you are using Netscape, and view "just" the image with your browser, the size will be shown at the top of the browser. (right click on an image with your mouse, a menu should pop up, and a choice of "view image" be on that list. Choose that, it will show you JUST the image. Hit your back button to return to the page you were on.)

border=0 -- to prevent any outline of the image (if it's a link) or, if you DO want a wide border, you can make that 1, 4, 9, whatever pixel size you want.

The reason you want to have height and width dimensions of your images in your HTML? Your page will load much, MUCH, faster when you do! Without the image's dimensions, the browser has to STOP at each image, wait for it to fully load (because it doesn't know it's size, and how much room to leave on the display of the page) before it can continue loading the page!!

Note: if you wish to make an image display smaller (or larger) than it actually is, you are much better off if you use a graphic program to resize it. A large image displayed with smaller dimensions ONLY in the HTML coding, still takes a LONG time to download. When it is resized in a graphics program, it will also make the file size smaller, which means it will load faster for viewers.

Here is an example of how a (small) .gif image, is inserted into this page.
The full tag is
<IMG SRC="mailslot.gif" WIDTH=32 HEIGHT=11 ALT="Email graphic" >

Unless you tell it differently, it will default to align with the left side of your HTML document. To link that graphic to bring up a visitors email program so they can send you email, is covered in the HTML tags in the next section.

rose image © Roxanne M. Flanagan 1-97 It is considerate, and considered "proper html", to include the ALT text for those browsers which cannot display, or have trouble loading, the image. (Try turning off the 'Auto Load Images' option on your browser, or use the browser 'lynx'.) Also, some page readers/search engine spiders will read the alt text as additional description of what information is on that page!
To make your text wrap around an image like it is here, the full tag is:
<img ALT="rose" align=left src="rrRose3.gif"><img ALT="Alternate Text" align=right src="altText.gif"> Then I started my text. You can place two images, side by side, then start your paragraph. Having one align left, and one align right, like I did with the rose graphic and "altText.gif". You can see the text will flow around both of the images.

[return/top]

MAKING LINKS:

The words which appear underlined and in color are the LINK TEXT. When your visitor user clicks on these words (or graphic), then you want a new page to appear; or you want to jump to the place on the page that has the corresponding ANCHOR.

Linking/Jumping to somewhere on the same page ....

Can be used to get to your email information, or from a 'table of contents' at the top, to corresponding items below, etc. i.e. Scroll back up to the top of the page, click on the words "Making Links" - it will bring you right to this spot on the page.

You need to decide where you want your link to jump TO on the page.

To each of the topics on your page?

At each place in your page
you want to bring the visitor to, place an anchor:

<A NAME="mylinks">& n b s p ;</A>
<A NAME="myfriends">& n b s p ;</A>
<A NAME="email">& n b s p ;</A>
Put a non-breaking space IN each tag
& n b s p ;
(without the spaces between the letters)

==>

Then at the top of your page, make your list of links
to go TO those places on the page:

<A HREF="#mylinks">My Links</A>
<A HREF="#myfriends">A list of my friends</A>
<A HREF="#emailme">Email me</A>

These will let your visitor jump
right to the part they want to go to!

Back to the top of the page?

You would write the html coding for your anchor as: <A NAME="top"> placing that next to your first line of your "table of contents". Then, further down on the page, where you want to put a "back to top of the page" type link, just put in:
<a href="#top">Back to Top</a>

Make an Email Link?

<a href="mailto:membername-here@geocities.com">Email Roxanne</a>
Creates:
Email Roxanne

Everything between the <a href=...> and </a> tags is part of the link "text",
even if it is an image, or, includes words and an image.

Want to make a graphic an email link?

<a href="mailto:membername-here@geocities.com">
<img src="mailslot.gif" border=0 height=11 width=32></a>
(ALL on ONE line, not two lines as shown above)

will show this ...

To make a combination of words AND a graphic a link ...

<a href="mailto:membername-here@geocities.com">
<img src="mailslot.gif" border=0 height=11 width=32>Roxanne</a>
(again - ALL on ONE line, not two lines as shown above)

will show this ...

Roxanne

In the above graphic & name hyperlink, you can click on either the image or the words. (The color border of the image can be eliminated using the border=0 option in the img tag.)

Note: Some editors places the information differently, but I believe it is still 'read' the same by most browsers.
<A HREF="mailto:membername-here@geocities.com"> <img src="mailslot.gif" border=0 width=32 height=32 ALT="Email">
(ALL on ONE line, not two lines as shown above)

Linking/Jumping to another page on YOUR site ....

You don't need to put in the entire URL - just the html page name within your site.

<a href="index.html">BACK TO THE FIRST PAGE</a>
shows:
BACK TO THE FIRST PAGE

Note, if you are using subdirectories, like I am here - it brings you back to the index.html of THIS subdirectory - not my main / original index.html page. See my page about subdirectories for more details.

Linking/Jumping to someone else's page - you DO need the full URL ....

<a href="http://www.geocities.com/roxys-place/">Roxy's Place Site</a>
shows:
Roxy's Place Site

Remember ... typos or other mistakes are what makes links not work/connect !

This page will print out to be 8-9 pages (depending on your printer's settings)
a small cost to have something handy to use and reference whenever you need to.

Web Page Help / HTML Help + Information © 1999-2008 Roxy Flanagan
HTML Info	Hints + Tips	HTML tags Basics	HTML tags Advanced	HTML colors
Tables	Page Control	Resolution	Browser Info	Validating HTML
AOL graphics + browser problems		Links to More Helpful Information

HTML + Web Page Help Webrings

Looking for graphics? ... this background © 1998 by Roxy M. Flanagan,
available for personal and non profit use in this color, and other colors, in the
Miscellaneous Collection of webpage, email stationery and wallpaper graphics by Roxy's Renditions.

ww.AutumnWeb.com SITEMAP

Holiday wallpaper/backgrounds:	Seasons+Nature wallpaper/backgrounds:	Other Theme wallpaper/backgrounds:
Valentine/Love . St.Patrick . Easter . Mother's Day . Father's Day . Patriotic . Halloween . Thanksgiving . Christmas	Butterflies . Floral . Nature Spring . Summer . Fall . Winter	Angels . Christian-Religious . Craft . Miscellaneous . Gem+Jewels . Babies-Kids-Teens . Special Occasions

... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997-2008 by Roxy M. Flanagan + licensors; All Rights Reserved.
Using Roxy's Graphics? See the button choices here. Plus, Add YOUR link!
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Wallpaper : Seasons+Nature : Holidays : Christian : Graphic+Other Rings
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/

Roxy Recommends:
Autumn Web
Web Development
Personal+Business
Custom Web Graphics

Web Page Help >>> HTML Tags Basics - Quick Reference

BASICS OF HTML DOCUMENT BACKGROUND COLOR & IMAGESFORMATTING TEXT INSERTING IMAGES MAKING LINKS

I cannot stress enough, if you are writing your own HTML, if you are not exact ... your links won't work, your page MAY not even show up!

BASICS OF A HTML DOCUMENT:

BACKGROUND COLOR:

BACKGROUND IMAGE:

FORMATTING:

'Preformatted' text

Line-breaking, paragraph separation

Indentation

INSERTING IMAGES:

MAKING LINKS:

Linking/Jumping to somewhere on the same page ....

Linking/Jumping to another page on YOUR site ....

Linking/Jumping to someone else's page - you DO need the full URL ....

BASICS OF HTML DOCUMENT BACKGROUND COLOR & IMAGES

FORMATTING TEXT INSERTING IMAGES MAKING LINKS

I cannot stress enough, if you are writing your own HTML,
if you are not exact ... your links won't work, your page MAY not even show up!