Basic Tip : Alt attribute in image tag
~~~ submitted by: Dear B [ email ] ~~~
"... A wonderful tip given to me by a computer user was to 1) always use alt tags and 2) to make the first one on a page say something like this: alt='thank you for visiting' or alt='it will take only a few seconds to load this page'. ..."
ADDITIONAL INFO When a visitor visits your page, if their graphics capability is turned off or unavailable, they will not see any of the images on your page. Instead, their browser will look for a descriptive tag (the alt attribute) and display the information found there. The alt attribute is part of the image element (tag). Examples using this attribute: <img src= "http://members.tripod.com/~webtv21/cutebear3.gif" alt="Hello from cuteBear. This image is a sample used in previous article"> or <img src="http://members.tripod.com/~webtv21/cutebear3.gif" alt="cuteBear picture (11973 bytes) - unoptimized">. Some browsers will also display the info provided in the alt attribute whenever your visitor's mouse is on your image.
Additionally when using the image tag, there are two attributes that are extremely important to page loading: height & width. When your editor loads a page, having the height & width attributes designated on each of your images speeds up page loading. Height & width are measured in pixels. Designating definite pixel values aids page loading by giving the browser parameters, or lets it know how much space to allot for an image. It can then go ahead and quickly load all the text and "reserve" that space in the layout of the page for the image. In this way, with definite attributes assigned by pixel size, page loading will be smoother and progressive. Otherwise, for each image, it would have to finish loading the image before it can place the text around that image. EXAMPLE: <img src="http://members.tripod.com/~webtv21/cutebear3.gif" width="187" height="175 "alt="cuteBear picture (11973 bytes) - unoptimized">
About Height & Width & PC's The above is very valuable for WebTV users when sizing images, and there is further consideration needed for gif type images. The more important of the height & width attributes is width when it comes to viewing your site on a PC. If you are going to resize your gif simply with HTML coding, or you don't know the H&W, it's better to just use width only. The browser will automatically determine the height at the right proportions. We may try to "guesstimate" height and width until we think it looks good. But when you use both height & width on a gif and look on a PC it may be all distorted and you can't even tell what it was. If you don't know the H&W and are going to keep it the same size, go to a tool like madrabbit's or Ronnie's to determine the actual H&W.
Intermediate Tip : Use <Title> tag
Earlier we discussed the bare basic tags each page should have. We noted the <title> tag would be discussed @ a later date. So here are a few submissions & info on using the <title> tag & it's importance.
REVIEW The title tags must be placed somewhere between the <head> and </head> tags. The title tag opens with <title> and must be closed with the </title> tag. Any number of words can be used in the title but only the first few that fit into the status bar will appear in the status bar.
~~~ submitted by: tweety [ email ] ~~~
"...put a title on every page as it's the only way we know if there is a JS (JavaScript) load error. Title-less pages are very frustrating."
~~~ submitted by: ericB [ email ] ~~~
"Make it a habit of using the <title> tag on each page, especially if you use JavaScript. Since WTV's Dec(?) upgrade, there is a "bug" with JavaScript that sometimes causes the page to misload. Some symptoms may include red or white border around the page or a missing title in the status bar (if one was coded onto the page), or a blank page. This means the page didn't load correctly and a number of things on the page may not work. There are a few other areas this "bug" affects & there are always other reasons a page may not load properly.
Another place where non-display of the title tag can indicate a misload is in the status pop-up. i.e. After the green status bar in the pop-up with the little rotating globe displays "getting page" & starts to slide right, if the title does not appear in the pop-up then the page is again misloading. [NOTE: Hitting reload before the green bar slides all the way right will sometimes "punch" the page in, reload it correctly.] ...So, in case the classic white border does not appear, having a <title> tag would be another method of determining a misloaded page. ...Using the <title> tag will help ensure your visitors see your page the way you intended."
ADDITIONAL INFO Although any number of words can be used in the title element, no markup (HTML) language can be used between the <title> and </title> tags.
Internet World says this about the title element (tag). "...the title element in your HTML page now serves a low-key but monumental purpose. The title is one of the first thing search engines (Hotbot and the rest) uses to index pages. This should affect what information you put in there. For the main page of your site, you not only want the name of your business, but important information about it in the <title> element..."
"...If your site is designed around frames, make sure the frameset HTML page includes a descriptive title element. Many people spend time giving good titles to other pages, but don't realize that the search engines look at the frameset HTML page and they neglect the title element..."
Some of our WebTV community have written "JavaScript Failure Alerts" that can be included on your page also. Most grant permission to use their alert code provided the author information included in the code comments remains intact.
Basic Tip : Scrolling within HTML editor
~~~ submitted by: Ruth [ email ] ~~~
"When I first started building my homepage I use to scroll all the way to the top of the page when I was editing. I sure was happy when a friend clued me in and told me how to get up there quickly by hitting the find key and typing in <html> so it would bring me right up to the top of the page. This is a newbie tip of course!"
ADDITIONAL INFO This tip works because you should have only one <html> tag per page, and it has to appear at the beginning of the page. [shortcut: Just enter <HT into the find box. There is only one tag that begins that way.] This will also work to navigate within the editor. i.e. You have a section on your pet, one on your music & one on your school. If you know your music section starts with "I like bee-bop music..." you could "find" the word "bee-bop" & you will be at the section you want to edit. [NOTE: Using cmd-G will take you to the next occurrance of "bee-bop", cmd-B to the previous if you pass the one you wanted.] When editing this article, whenever we had more to add to this particular tip on scrolling, we just did a "find" on the word "Ruth", the tip submitter, as her name appears at the beginning of this tip section.
About Alt.Discuss.Homepage-Homepage Helpers
The alt.discuss.homepage newsgroup is a great source of help if you run into a snag when creating your home page. Each issue, we will focus on one or more tips that will help your home page design. ADH also has a group of members called Construction Crew. If you have a particularly complex design problem, you can visit our home page at http://members.tripod.com/adhhh/ & request a Construction Crew member contact you for more one-on-one assistance.
Have a tip, idea, tool, or shortcut you'd like to share & see featured in the next or subsequent article? Submit your tip to our ADH-HH Tips & Tools Committee.