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!


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

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:


<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 <P>

    <P>
    One can break a line <BR>
    without inserting a blank line for a separate paragraph.
    </P>

    <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:

    <p align=center>centering</p>

    <U>underline</U> results will be: underline

    <B>bold</B> results will be: bold

    <I>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 [ &nbsp; ] (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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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 !

    <p align=center><img src="mailslot.gif"></p>
    shows:

    mail slot

    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 lettersmailslot aligned to top of letters on line aligned=middle mailslot aligned to middle of letters on line aligned=bottom mailslot aligned to bottom of letters on line
      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  

    mailslot aligned left align left

    mailslot aligned middle align center

    align right mailslot aligned 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" mailslotaround 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.
  • Email graphic 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-97Alternate Text 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 ...

    email graphic

    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 ...

    EmailRoxanne

    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 © 1998 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

    Background © 1998 by Roxy M. Flanagan.

    ww.AutumnWeb.com SITEMAP


    ... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
    Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
    Links to MORE free graphics sites, Roxy Recommended!
    Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
    Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
    Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

    Roxy Recommends:
    Autumn Web
    Web Development

    Personal+Business
    Custom Web Graphics