Designing Web Pages

Web Graphics Backgrounds Icons & Images   Sound Info. Tool Box

 

The Basics

Before learning how to create web pages, it is probably important to know a little how the World Wide Web works. The WWW is a network of thousands of computers. These computers are either clients or servers. The servers store the information and send it to the clients when it is requested. The information comes in many forms ( text, images, sounds, video). The information is sent in the form of HTML (Hypertext Markup Language). HTML tells the client how to display the information.

There are now many user friendly programs available. You do not need to know how to do HTML scripting to create a web page . Documents may be created in word processors. Many word processors allow you to save files in a HTML format. However, knowledge of HTML is beneficial and HTML is not difficult to learn. You can create a simple page in a few minutes. With HTML you can format text, add sound, graphics, video and save all of it in a text-only ASCII file. It doesn't make any difference whether the information is from a Windows or a Macintosh machine as long as it uses HTML.

In addition to being a great way to create documents, HTML has a very powerful feature. It has the ability , through hypertext, to link to other HTML documents. These documents can be anywhere on the Internet. Clients can jump from one web page to another .

All of the information on the web can be accessed quite easily because everything has a specific address. This address is called a URL (Uniform Resource Locator).
A URL is an Internet address.

Http://www.crcs.k12.ny.us/ES/index.htm

 

1. The first part is called the protocol. It is usually http: // but it could also be ftp:// gopher:// news:// file://

2. The second part is called the domain name. In the example above, the domain name would be www.crcs.k12.ny.us . The domain name is the name of the server to which you are connecting.

3. The third part is the directory path. The directory path shows where on the server the information is located. In the example above the directory path would be /ES/

4. The fourth part is the document file name.This shows the file which is being accessed. In the example above, the file name would be index.htm .

The browser is the software that your computer uses to get to and view documents on the WWW. Different browsers have different features, and web pages are displayed slightly differently with each one.

If you are going to view web pages, you need a browser. If you are going to create web pages, you should probably have two or three browsers. That way you can see how your page will look on different browsers. Some of the more popular browsers are Netscape Navigator, Internet Explorer, and Mosaic.

Most browsers are set up with buttons to help you navigate the web, return to your home site, save, and print documents. Text on a page that appears in a different color is usually hypertext. Placing your mouse on this text and clicking will jump you to another place. The place might be another place in the current document or another place on the WWW.

That's enough information on how the web works. Put it into action. If you are reading this, you already have at least one browser. Use your browser to go get some stuff. Before you start, create some temporary folders (or directories). You'll need these as places to put the software you will download. There is a lot of great SHAREWARE (programs you can try before you buy) available to download (download means you get it from a server and put it on your computer).

Useful Tools:

Creating a web page document is as easy as using your word processor. Save the document as an html file, or copy and paste the text into your web editing program. There are also many easy to use web editors.

 

 

How to download software:

Go to the site by selecting the hypertext highlighted word or words. When you find the file or program you wish to download select it (it will be highlighted also). You will then be prompted as to where you wish to save (usually to your hard drive in one of the temporary folders or directories). When you have finished saving, exit your browser and close your Internet connection. Find the temporary folder or directory and double click to open it. Compressed files will extract (if you have a zip-unzip utility installed) into the temporary directory. Then look in directory or folder for an install file, double click on this file and follow the prompts to install the program on your computer. If there is no install file, look for an "exe" file. Double click this file and the program should start up. If you need a zip-unzip utility, try WINZIP .

Starting Your Page

Start your web editor and begin a new document. You can also do this in Notepad if you don't have a web editor. HTML is text surrounded by tags <>.Inside the tag is the tag name. The tag name tells the text how to behave in the browser. Most tags require a starting tag and an ending tag. A forward slash precedes the tag name in the ending tag. The slash in the tag is like an off switch.

Go to Beginner's Guide to HTML to learn more about tags and how to set up your page. I suggest you press the right mouse button and select "save link as.." and save the URL to your desktop (folder or directory). You may also wish to print out this document for a reference.

Take a look at HTML for the Conceptually Challenged .

 

Web Graphics

Icons and Images

Collecting your own icons and images is a relatively simple task. Place your cursor over the image you wish to capture and press the right mouse button. A box will pop up. Choose "save as" from the choices, and it's yours! Another way to collect an image is to choose "View" from the file menu. See "Source". This will give the HTML for the page you are viewing. Find the "img src" tag to get the name of the image file. You can then add that file name on to the end of the URL. This will bring the file up and then you can choose "save as" from the file menu. Many images may have copyrights. When in doubt, check with the source. Many places will let you use images if they are links to their own pages.

GIF and JPEG are the formats used most on the web. GIFs support 256 colors. The images can be interlaced. GIF 89a is good for animations and transparency. GIFs are good for text or line drawings. JPEGs are good for photo images.

Caution: Graphics can take up a lot of file space and can cause your web page to load very slowly. Backgrounds can overpower the text and make it difficult to read (or even look at!) your page. Also, your page may appear different on different computers depending on how the resolution and colors are set up. Keeping images at 256 colors is a good idea if you want most people to be able to view your page the way you intended.


Resources:

Web Graphics Tools

 

Tool Box


Try some of these great Shareware applications and utilities.

cuteFTP Arachnophilia PaintShopPro ThumbsPlus LViewPro Eudora Winzip

 


Backgrounds and Colors for HTML


Backgrounds and Colors for HTML


 

© Boxbitz 2001

Contact: M. Black