Home Contents About Us Add Our Link

HMTL TIPS

Free Web Graphics Praise Links Tools & Tips Holiday Graphics Animations Art & Verses Art & Verses

 
 
Getting Started
 
Types of Graphics
 
How to Grab an Image
 
Copying and Using a Background
 
How to Use a Bordered Background.
 
Make Those Little Bars Big
 
Testing, Testing, Testing

 

Getting Started:

Step 1:

Anyone with a computer and an internet connection can create a web site. You don't have to be a programmer, you just need the desire and a message. Since the idea is to help you build your own Christian web site, lets pray for a message that will inspire or aid others in their walk with Jesus Christ.

In fact, that is the first step. Prayer!!

Step 2 :

Arm yourself with some tools. You don't have to know HTML to create web pages, but it helps. HTML is Hypertext Markup Language. This is the language used to format pages for your website.

There are a great many books on HTML as well as several very helpful web sites. I recommend:

HTML for DUMMIES by Ed Tittle & Stephen James

and

HTML Goodies by Dr. Joe Burns.

You should also get Web Authoring & Publishing Software. This will allow you to create web pages without having to learn HTML. It will generate the HTML code for you.

Even if you are an HTML expert, these packages can save you a great deal of time and frustration. They are extremely helpful when building tables.

If you don't have the money to buy one of these packages, I suggest:

AOLpress (from America OnLine)

or

MicroSoft FrontPage Express (Internet Explorer  ver. 4.0).

Both are free and will do everything you need to do and more.

Step 3:

You will need to decide where you want to house your web site. There are several choices. If you plan on keeping the site small, I would recommend that you look into the many places on the internet that offer free space for your personal pages. Your internet service provider may offer free space with your account.

The problem with free space is that the URL (the name your web site is accessed by can become complicated. For example, this web site used to be at URL  http://members.aol.com/seven77ima/.

 This  is much more difficult to remember (and promote) than say www.777images.com.

 

 

 

Types of Graphics:

Images, (backgrounds, borders, pictures, bar, buttons, etc.) are the things that make a web site attractive and allow you to illustrate as well as describe. Images do slow down the loading of your web pages. You don't want to use too many or make them too large. If your page takes too long to load, you will loose your visitors before they get the message. If your site is graphics intensive, tell your visitors on your home page that the wait is long so they will know what to expect.

Images for use on web sites come in two varieties (formats). Gif's or jpg's. There are others, but these are the only ones you should concern yourself with. Both of these are methods of storing an image in a compressed format so that they use the minimum amount of space and, therefore, will load onto you web page faster than other formats.

Generally, .gif formats are used for drawings and simple images. The .jpg format is used for photographs. The .gif format uses 256 colors and must be used if you wish any portion of the image to be transparent. The .jpg format uses 16 million colors and will reproduce photographs nicely.

You can create your own images with a graphics program such as: 

Paint Shop Pro,

Corel Draw,

or

Adobe PhotoShop.

The easy way, however, is to go to the many free graphics sites (like this one) and just grab their graphics.

BE CAREFUL that you don't violate copyright laws. The Copyright act of 1976 states that material becomes copyrighted as soon as it is published. It guarantees the owner certain rights to control how that work is used.

BE SURE YOU HAVE PERMISSION and give them credit for their work.

 

 


How to Grab an Image:

To download a graphic, place your mouse pointer over the image you want, right click your mouse, and select:

Save Picture As.

Determine where and into which file you wish to temporarily store your graphic.

Create a file name for your graphic (or use the existing file name for the graphic) and click OK.

Example: yourimage.gif

Just remember where you saved it, so you can find it later.

To install the graphic on your web page, follow the instructions with your Web Authoring software or use the HTML code:

<IMG SRC="yourimage.gif" >

 



Copying and Using a Background:

Downloading a background is much the same as downloading an image. Find a spot on the page where the background is located that is vacant (does not have any pictures), right click your mouse and choose :

Save As Background.

Background images should not be too large. They are usually created as small as possible and then tiled (or repeated) to create the desired effect. Your web browser takes care of the tiling so you don't have to worry about it.

To install the background on your page, follow the instructions with your Web Authoring software or use the HTML code:

<BODY BACKGROUND="your-bkgrnd.jpg">

 

 


Adjusting for a Bordered Background:

There are several methods that can be used on bordered backgrounds. However, many of these techniques fail on different size screens or when the monitor is set to view a different number of  pixels per screen.

Rule of thumb: Use absolute values rather than %'s for any width or alignment because 25% of a 14" screen is different than 25% of a 17" screen, etc.

One method that is used quite frequently is to use UL tags to move the print to the right, off of the border. The problem with this is you have to do it on every line and it may not look the same on all browsers.

My favorite method is to put the entire page in a table and use a second table to move the first column over past the border.

First, create a table with two columns and one row.

Next, create a second table within the first column of that table with one row and one column.

Set the cell spacing (or cell padding ) of the table, to 1/2 the width in pixels of the border.

You can then put all of your text, more tables or graphics in the second column.

This should work for all browsers and screen sizes.

Note: The second table serves the purpose of a blank picture pushing the first table cell out to the width of the border. Using the width command will also serve the same purpose, but will not work for all browsers.

Example:

 
Border Here
 
Text Here

I left the table borders visible so you could see what is happening.

Here is the code:

<TABLE >

<TR>

<TD>                  Border Here

<TABLE BORDER CELLSPACING="40" CELLPADDING="0">

<TR>

<TD></TD>

</TR>

</TABLE>

</TD>

<TD Width="200">Text Here</TD>

</TR>

</TABLE>

You can experiment with the border size if you don't know the width of the border in pixels.

 


Make Those Little Bars Big:

Bars (those purple  lines between each of these boxes) can be created in HTML code with the command:

<HR>

These lines, though, are a rather uninspiring grey. If you wish to use more colorful bars, you have to use images.

Bars are usually made small so they don't take up too much valuable space and will load fast on your page. Our bars, generally, need some adjustment to use on your page.

For example:  If you downloaded the purple bar you see on this page and loaded it out on your web page as is, you would see something like this.

To make the bar stretch across the page, you need to adjust the HTML code  by locating something like this:

<IMG SRC="bar.gif" WIDTH="200" HEIGHT="5">

and changing it to something like this:

<IMG SRC="bar.gif" WIDTH="400" HEIGHT="4">

This will give you a bar like the one below this box.

You can make the bar any width ( Not too wide or you will have everyone scrolling from here to eternity). Keep the height at 3, 4 or 5 pixels.

 

 

Testing, Testing, Testing:

It may come as no surprise to you that not every computer is the same. What will surprise you is that the first time you view your masterpiece of a web page on someone else's computer is that it may not resemble what you initially intended at all.

Colors that may look beautiful and vibrant on a computer with special graphics card may look washed out on a computer with 256 color graphics card.

A web page that lines up perfectly on your 17" screen with Internet Explorer V.3.0 may look like it wandered  a bit on a 21" screen with Netscape Navigator, etc.

The trick is to test your web site as many ways and on as many computers and with as many browsers as possible.


JavaScripts ] [ HMTL TIPS ] Links ] Color Cubes ]

We would love to have your comments or suggestions.
     Please E-Mail:  Seven77images@houston.rr.com
Copyright 1997, 1998, 1999, 2000,2001,2002,2003 
777 Images
All Rights Reserved,    
Last Date Revised   06/20/03