Web page tips

    Now that you all have a place to put up personal web pages  you may want to do that.  You are not obligated to do so by any means, it is just a service you have access to and i wanted to help you on, should you be interested.   If you want to build a personal page you can  avoid some of the more common mistakes that take up lots of time as well as  generating feelings of frustration.     Here are a few tips that may save you some work and time when working with with the text, graphics,  the html files you will be generating.  These are things i have learned by going the longway around, spending hours fixing mistakes and dealing with unforeseen problem areas.


Topics
Don't get carried away with exotic font styles
Always use standard graphics
 Your photos don't have to be big as life to work
 Attachments ride better if not pasted in a format
 Links and text case
 
 


Don't go 'font happy'

The tendency for most people starting out is to get carried away with all the varied font styles there are available today.  For example, although a halloween page with eerie wavy font, dripping blood looks great on your home computer's  editor screen,  you must keep in mind that not everybody who calls up your page will have that font on their machine.  If they do not have that font then their computer will substitute it for one that they do have and they will not see that scary text style that you do.   This by itself is not too bad except then using some of these fancy schmancy (slang word) text fonts, but in most cases when the text is substituted it is no longer the same physical length as the fancy one and the formatting of the sheet can really get messed up and look strange.   Keep it simple.   If you like fonts with out the serif, such as the one i am using here now.  Then use Arial, or Helvetica.   If you want font with serif then use Times New Roman, or Times Roman, or one of the more common and popular ones.  Most people have windows.  If you select a font from the default windows installation, then it is probably a safe one to use.  Notice the difference in size between this arial text and that smaller, Times New Roman text?  They are actually both 10 point fonts.   You can see how a substitution of these two would really scramble the formatting.  And these are "standard" text styles.   Imaging some of the weird ones like snow_cap, or shotgun. being exchanged for one of these?

(topics)



Use standard graphics

Just as with the text, some people rely on proprietary graphics from some paint program or difficult computer platform, like Mac graphics, for example.   The best compression is the .jpg format.   This is the one i recommend you all use.  A .bmp or a .gif file of identical physical size as a .jpg file could be many times as large.  Web space is precious and you do not want to be extravagant with the size of your photos.   If your graphics program puts out a strange format, and....

"anything that is not .jpg or .gif is a strange format"
 then that is not really a big problem because most of the graphics programs have an "export" command under the "File" menu in the headline.  Even if your program default puts out a real nightmare like a .png or .pub formats, for instance, are generated by a publisher program.  Publisher programs usually have a proprietary file extensions that no other program can read except them  However there is hope because you  can still "export" the graphic as a .jpg, or at least a .gif which will be much easier to work with.   The same goes for .tga, .bmp and other memory intensive graphic formats.   This is especially true if you are working together on something with other people and sending your work back and forth between a translating team, to name one situation.   Sending proprietary graphics with your work make it difficult the the other members of the team to work with it.    Trying to work a .png or a .pub, or any document that was developed on a publisher. They can be enormous. pasting one of these into a web page brings up lots of problems for everybody.    So keep it simple.  Use anything you want to make your graphic but convert it to a .jpg before you put it into your html page.  And above all do not use publisher generated pages as they take up multiples more space than an html with .jpg graphics More people will be happy, including yourself.

(topics)



Bigger than life

Memory is the name of the game when you are dealing with things like Sound files and Graphics.  A picture that is 320 pixels long and 240 pixels high only takes up 1/4 as much room as a photo that is twice that size.  The size of the photo increases by the square of the sides not the linear increase in size.  You can post four photos that measure 320 x 240 on your page for the same memory space as one photo that is 640 x 480 in size.   How big does it have to be?  Well that is up to you to decide.  To help you out, here are some comparative sizes of the same photo along with comments on memory space and other related data.

50 pixel .jpg graphic
100 pixel .jpg graphic
240 pixel .jpg graphic
320 pixel .jpg graphic
480 pixel .jpg graphic
640 pixel .jpg graphic
800 pixel .jpg graphic


The above is a picture i took of my wife Sonja's roses.   The size of the photo above is only 50 pixels long and the memory space required to hold it is only 2kb in size.  This size graphic is good for buttons and switches.

(rose menu)




This graphic is twice the linear length of the last one but it is four times the area.  This is what a 100 pixel graphic looks like.  This is suitable for thumbnails that are used in pictorial albums for links to the larger photo.  This size .jpg takes up 3kb of room on your hard drive.

(rose menu)

This picture measures 240 pixels across.  It is starting to shape up as a graphic candidate for an html page.  It is large enough for good definition yet still small enough to embed in with text.  This graphic has grown and is 10kb in size

(rose menu)


 

Now we are getting some where.  This graphic is 320 pixels wide and is large enough for a feature graphic.  It is still small enough to be included in a page with out squeezing the text too much.  It takes up 14kb of memory space.

(rose menu)


 

Now we are into the feature graphic size.  This is 480 pixels wide and takes up 27kb of disc space to store.  This size graphic would be use as a feature, or main graphic to allow for more detail and sharpness.

(rose menu)


 

Oh boy, we are hitting the big time now.  This baby is 640 pixels wide and tips the memory scale at 39kb required for storage.  This is large enough for wall paper on some machines or background for something.  It is pretty big to be anything else but a large feature graphic or a background.

(rose menu)



 





Now we are into the extravagant.  This is definitely wallpaper size or background graphic.  It is 800 pixels wide and is so large you have to put any text either above or below it.  This graphic is 61kb is size and for a photo this large that is fantastic.  If this identical photo was a .bmp format it would be a whopping 1,407kb in size.   This is almost one and a half megabytes in size compared to the .jpg format of only 61kb, or twenty three times smaller.  That means i can post 23 graphics this size in .jpg format for the same memory space as only one in a .bmp format.  All other formats are larger than .jpg and some are much much larger.   I hope this brings in the importance of using standard formats that give the best compression.

(topics)




Sending Graphics as Attachments

This is more or less a general tip that applies to more than just your web pages or html files.  This effects you email as well.   If you have a photo that you want some body to have then do your friend a favor and send it along as an "attachment" to your transmission, not an integral part of it.   It is pretty easy to simply "copy/paste" in a graphic but it seldom stays that way when it comes out of the other end of the transmission.   Horrible things can happen to a graphic pasted into a file that way (too fierce to mention with out scaring myself) so when ever you have a photo to send (and remember about using only JPG format for transmission and web stuff) to somebody and you really would like that person to be able to see it, do not paste it into your document, attach it using the command of the same name, found at the top of your mail client.  As an attachment it is dealt with separately and not shuffled in with the document transmission.  It can get garbled that way.

(topics)


Links and case sensitivity

    Working on web sites you will soon find out how important a little thing like the difference between an upper case letter and the same letter as lower case. (capital and small letters)   The whole idea of html is to hop around a bunch.  I used to think H.T.M.L.  was something you order in a diner, like a  Ham, Tomato, Mustard and Lettuce sandwich.  But i found out that H T is really the letters for Hyper  Text, and that is what hyper text does, it sends you places for reference or what ever.   just like on Star Trek when they hop into hyper space, so we hop through hyper text.    Hyper Text Markup Language is the name of the game when working with web pages and html is Case Sensitive.  That means if you say "go here", when you really meant "Go here" then  it ain't gonna go no place at all.  How ever you will get a nice irritating message saying you can't get there from here, or it does not exist, or some equally helpful piece of information that is just as obvious and useless to you.
    Targets, links and meda tags. create documents with unlimited resources of reference.  But everything must me called out in the proper case.  Not only that but there are very few special characters that you are allowed to use in html.  You can use a dash, "-", and you can use an underscore, "_", both located on the same keyboard key.  If you try anything else you are likely to miss your connection because html will not recognize most special characters as text.  Since it is much easier to make errors in case than in spelling, it is logical to do away with case all together.
    I myself used to use case as delineators in compound words to save character count.  For example i might name a file something like "TranslatorsHelpFileMenu.html", because it is less confusing than trying to read something like "translatorshelpfilemenu.html".  However if i use all lower case letters i lessen my chances of making errors due to case.  Now this is where i bring in the special characters.  The file makes sense again when titled, "translators_help_file_menu.html"   And this way i do not have to worry about case, everything is lowercase.  One thing less to have to remember.
 

(topics)