Web browers are case-insensitive to all HTML tags, so you may use
However, file names (for hyperlinks and images)
If you put a space where there shouldn't be one,
BASICS OF A HTML DOCUMENT:
Every HTML tag MUST have a beginning and an end
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.
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!!
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:
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)
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.
See the page HTML Colors for the 6 digit hexdecimal (HTML) codes of the 216 websafe colors.
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.
<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>
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:
<U>underline</U> results will be: underline
<B>bold</B> results will be: bold
<I>italic</> results will be: italic
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:
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.
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>
Between the img and the src can come any of several options; (some examples below)
<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.
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!!
Here is an example of how a (small) .gif image, is inserted into this page.
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.
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!
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:
||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>
These will let your visitor jump
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:
Make an Email Link?
<a href="mailto:email@example.com">Email Roxanne</a>
Everything between the <a href=...> and </a> tags is
part of the link "text",
To make a combination of words AND a graphic a link ...
will show this ...
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.
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>
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 ....
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.