Virtual Graphic Artist Webzine: Your First Web Pages

So you want to do your own web page but you don't know how to go about it? This article discusses some basic concepts of web page production to give you an idea of how to go about setting yourself to do web pages; both yours and your customers. As you go through the items, you may feel that you are comfortable with some of the items but not with others. Perhaps this is where you will need more research and work or maybe you should consider hiring a consultant for these tricky parts.

When you plan to do your first page, keep the project very, very simple! There is no better advice for many times beginners want to produce Disney-type sites on their first try with obviously disappointing results. Proceed one small step at a time and plan that your second (third or later) sites will incorporate more features. Your first step is to assemble your hardware, software and an internet connection.

Computer
Because of the nature of the web, it doesn't make all that much difference which computer you use, PC or Mac. There is a slight advantage to PC when you start adding sophisticated programming and sound add-ons and a slight advantage to Mac for creating and manipulating graphics. For beginners, you can use what you have available to conduct your experiments and develop an understanding of web pages. As you develop experience and sophistication, you will identify what you need for a computer system based more on the type of work you want to do. The choice of your second computer is going to be much more critical but by then you will understand what you need.

Web pages can be rather complex consisting of graphics and optional programming such as JavaScript and many other technologies. But realize that web pages are small in size so that they can load quickly over the internet. The result is that graphic files should also be small and fast loading. In web page design, producing pages that are fast loading is a serious objective. The result of this quest for small and fast loading is that web pages and graphics are usually small. This means you don't have a demand for lots and lots of ram in your computer. Further, since the graphics are small, you won't notice how slow your computer really is because you don't wait a long time for huge files to load, display or process!

Your fist pages will probably be very plain and simple and there will not be a demand for much computer power. This means that you can use an older and slower computer with a decent and affordable amount of ram and hard disk storage. There is no need to buy an expensive full-blown computer to do your first web pages. You can learn a lot about web pages and web page design with the computer you have now. There is a lot of room for experimenting with special effects such as animated GIF's, rollovers and image maps. Even JavaScript programming has no serious computer requirements and a beginner can spend a lot of time learning programming with the smallest and oldest of computer.

As your experiments get more sophisticated, so will the pages and you may start noticing slowdowns, especially when you experiment with graphics and pictures. By then you will slowly build a concept in your mind of what computer system you will want to buy. The results of your experiments will be the best guide because they are based on actual experiences rather than anyone's advice; especially those who want nothing more than to convince you to spend money!

Software
In order to produce web pages, you will need an editing program that provides an environment for writing the code. For software, there are two basic types. There is the code editors where you actually build the site working directly with HTML code. Such programs are similar to word processors and the most important factor is that the final file is HTML compatible. Many programs save information in their own format which may be incompatible with HTML standards. Fortunately, there are many programs available that will provide the necessary work environment from simple shareware programs to complex visual editors that offer a great deal of flexibility and capability.

A second type of program is the visual editors such as Dreamweaver, PageMill, GoLive and many, many others. The advantage to the visual editor is that it shows you a preview of what you page should look like on someone else's computer. In this way you can control the look of the page and work out design problems by either manipulating the elements you see on the preview or adjust the HTML code and check the results in the visual editor's preview.

Of the two, it is better to work with the visual editor but get into the habit of studying the HTML code. Be no stranger to this strange looking stuff because there are often times when you may have to work on the code level to get the look you want. Further, you may have to troubleshoot the code to make sure it will work with all browsers. A final, and most horrible concept, is that some visual editors change the HTML code to their own standards. This may be contrary to newer versions of HTML and could also limit your creative expression. There is nothing worse than putting in perfectly acceptable code and have the visual editor tell you this code is incorrect! Wait, there is something even worse: a visual editor that will "fix" your code changing it into something entirely different stubbornly refusing to allow you to put in your own code!

Should you learn HTML code? Yes, you should have a knowledge of how HTML works and the meaning and syntax of individual HTML commands. But you shouldn't have to program from scratch. Nor should you study HTML programming in any great detail for your visual editors do most of the work for you. You should be able to read the HTML code and understand how the code will construct the page. With this level of understanding you should be able to spot errors and make necessary corrections. A good understanding of HTML code will also allow you to work better with your visual editor because you will understand the nature of the program and what it can do for you.

Internet connection
Your link to the world, an internet connection is essential to deliver your pages to the world wide web community. Actually, it's a bit more complicated than that. What happens is that your internet service provider (ISP) allows you to save a copy of your files in a directory on a small part of their hard drive on their web server connected to the internet. You, the owner of this directory, have the right to place or remove files as you see necessary and any time you wish. You might even place directories inside this master directory to help you keep your site organized. Once the files are in this directory, they can be called by anyone in the world who types in the proper WWW address. Your ISP's server should be running and on line 24 hours a day, 7 days a week ready and waiting for anyone to request one of your pages. On a very advanced level, you may set up your own server but it will have to be on line at all times and that means a very interesting telephone bill.

In order to access your directory on your ISP's server you must use file transfer protocol (FTP) through your internet service to connect to conduct your file transfers (or deletions, when necessary). The programs are very inexpensive or even shareware and only require that you experiment for awhile to get used to using them. The trick is being able to log onto your directory because they are password protected. If they weren't, anyone in the world would be able to log onto your directory and change files at will. Your directory is your own private space in the internet world so be very careful giving anyone free access.

If you have an ISP now, you should call and ask for instructions on how to connect to your FTP site. They should give you the correct passwords or help you establish them so that you can gain privileged access. If you don't have an ISP, be sure and ask about FTP access when selecting one. Some ISPs may not be set up to handle FTP storage as part of their business strategy to keep their monthly rates low. Others may have restrictions on how much space you have available. You may have to pay extra for FTP storage.

Without FTP storage (your own server or an ISP) you are not going to get your pages online. There has to be a storage area online at all times whenever anyone wishes to request to view one of your pages. Once your pages are online, you will have to figure out a way to tell the world they are there. Listing your pages with search engines is one way but realize that although your pages are out there in the world, you will have to exert some effort to be sure viewers can find them.

What do you have to say?
By this time we have all the components in place to be ready to start producing web pages. But what do you put on them? What do you have to say? After all, a web page is a form of communications and you obviously have to have something to say by putting words, ideas, graphics, pictures, sounds or whatever you wish on or attached to the page.

You are faced with two tasks. First, you have to have to figure out what you want to put on your pages. Second, you have to figure out how to produce the page making sure the contents in the correct HTML form. Be very careful because these two seemingly different concepts affect the success of the other. Beginners who are struggling to create a workable page concentrating on the mechanics of web page design and HTML code often produce an uninspiring page mostly because they don't have any meaningful content. The opposite could also be true where there is no shortage of words but the inability to get the HTML code right may mean the page will fail.

Page content is a necessary ingredient in the production of a web page. If you don't have anything to say you may even have to copy something from a book. Whatever you do, don't put that page on the web or you will be in violation of copyright laws! The advice given here is to find a source of words so that you will have something to put on your page and not to freely steal anyone else's work (which is illegal!). Do so only with your own experiments. It would be nice to see how you could design a page that contains this certain material and make the page look nice when viewed on your own browser. If you want pages that you wish to post on the web and share with your friends, you are going to have to do your own writing.

Writing is a difficult task for many but sooner or later you're going to have to do your own writing. Often times, web page designers will have to write for their customer's pages as part of the job, like it or not. Editing is also an important skill where you may take material written for things like brochures, reports, memos or whatever and rewrite it into the web page. You may even have to write the sites yourself after interviewing the customer and their employees. It can be a difficult task but it is a necessary part of web page design and production.

How do you start?
Before you begin producing web pages you should assemble your system and maybe even have a web site for storing your web pages. Your minimum setup includes a computer, an editing program (visual or code), and a browser program for viewing your results. It is not necessary to have an internet connection for your first test pages but only you will be able to see them until you arrange for a way to upload them to an ISP. Once done, you can begin creating pages. You can add graphic programs later as your skills increase and your experiments demand them. Later experiments may also include sound, music, animation and JavaScript programming. Add these programs as you feel you need them.

It is really important to start small with very simple, primitive pages and then gradually improve the pages with more sophisticated HTML programming, tables, graphics, JavaScript, rollovers, and even advanced DHTML. The mistake beginners make is that they search the web for really sophisticated and interesting pages, the kind that win design awards. Then they try and duplicate the pages. Of course, the original pages were designed by seasoned professionals with a lot of experience, a lot of time and a huge budget. Many sophisticated pages include JavaScript programming that will test the skills of experienced programmers to understand. Your results at duplicating these pages is going to be very, very disappointing. So much so, the beginner will conclude that they cannot possibly create web pages.

Concentrate your efforts on getting the page to work by successfully viewing it in your browser. With the encouragement of a successful page, add more to the page. Try adding graphics, tables, and even JavaScript. Explore many of the features of HTML and if you get good, try working with DHTML. Learn about controlling the content of the page and even developing sites by dividing the content logically among a number of separate pages. But most important of all, progress slowly and allow your skills to build.

Your first web pages should be very simple, both in code and content. More contents equals more complex pages but underneath it all is the basic requirements of a web page. Surprisingly, your visual editors will start you off with a technically accurate page with only the problem of lacking content. On your first page, simply type your name. Save the page and you are finished. Open the page in your browser program, Internet Explorer or Netscape, and view the results. It should work.

Return to your visual editor, turn on the HTML code mode and study the code. Try and understand what it all means. Continue your experiments any way you wish by referring to the manual to learn what the program can do. Then develop a very, very simple exercise that will demonstrate that feature. Don't forget to preview the page in your browser and to study the HTML code. Slowly you will learn all about using the visual editor.

Another tactic is to study pages you see on the web as you surf around. You can view the HTML code and figure out how they did it. You then should develop an exercises to create the same effect. Once done, you should be able to use that technique in any web page you design. Slowly, over time, you will develop a wide variety of useful web design techniques. Further, by figuring out how other designers have handled certain problems, you will be developing your troubleshooting skills. It is important that you learn to fix any page that refuses to work they way you want.

Continue your studies with graphics, photographs, sound, animation and any other technology available on the web. Beneath it all, this can be an interesting hobby and lead to a rewarding career. But be warned, move slowly and realize this can take a very long time!

The nice stuff
Once you master the requirements of producing a simple (and single) web page with a little bit of type contents, you should expand your experiments to include some of the nice fun stuff such as graphics and even JavaScript programming. You should start with a workable HTML page and then make additions to it. Here are some things that you should try working with. Again, start with producing a basic page and don't start by trying to do the graphics first. They are actually additions to web pages, not the pages in themselves.

Clip art graphics is a great way to start experimenting with graphics. You should go to your local department store or computer store and buy a very inexpensive collection of web graphics. Don't invest much money in such a collection because you will probably end up wanting to make your own graphics. Also, web clip art graphics are usually generic and eventually your graphics requirements will be very specific. You probably won't find what you need in any clip art collection so don't expect this investment to be much more than experimentation and, later, inspiration as ideas of what you would like to produce on your own. If you are online there are many sites you can download free web graphics to use for your experiments or even pages you plan to upload to the web. But be careful, don't freely copy any nice graphic you see on a page and use it. This is strictly illegal! Take graphics only form those sites that are set up for that purpose and clearly state how you can use the graphics without being in violation of copyright laws.

Learn how to add a simple clip art graphic to your page. But make sure you can do it well, for there are two requirements. First, the graphic must be included in the HTML code correctly and actually work. Graphics are not a part of the page, they are actually linked to the page and are loaded by the viewer's browser separately. They must be FTP uploaded to your web server separately. This linking problem is not difficult, but it will take some time before you get used to the procedure.

The second requirement is that the graphic should look a part of your page design. Your first graphic experiments will probably be limited to seeing if you can actually get the graphic on the page but later experiments will strive to have the graphic appear as a part of an overall visually pleasing design. Graphics should not be merely thrown onto a page and avoid using graphics just for the sake of using graphics. They should be a part of the overall design and a functional part of the message of the page, supporting the text copy and look as if they are a necessary part of the page. If they are used to dress up the page, be sure they are in good taste and not ugly or gaudy graphics that do more to irritate the eye of the viewer. Avoid graphics that blink or animations that are distracting. In the end, you will learn that including graphics wisely on your page is very difficult!

Photographs are a very useful way of adding meaningful content to your page. If you wish to produce a page telling about your vacation trip, pictures are an ideal addition. But how do you put pictures on your web page? There are two methods, both require that you buy some expensive hardware and software. A scanner will be needed to convert your photographic prints into a digital form that is necessary for the web. Once scanned, you will probably want to use an image editing program such as Photoshop to make sure the picture looks nice and is in the proper file format. Many scanners are sold with free and simple image editing software and this is definitely the place to start. If you get real serious about your pictures and want to edit, retouch or even create special effects, Photoshop will be the ultimate answer. Be prepared to spend an awful lot of money!

Including photographs is no different from a programming point of view than with simple clip art web graphics. A graphic is a graphic regardless of who made it. As long is the photograph is in the proper web format it will work. To make sure, test the page in your browser.

A digital camera will allow you to produce web photographs instantly from the camera without film processing or scanning. You may still need to open the photograph in an image editing program to make any desired or necessary adjustments to the images before they will be ready for the web. Digital cameras are very expensive but because of the low resolution limitation of the web, a digital camera with a maximum resolution of 640 x 480 will be more then adequate for most photographs you would want to include on the web. Photographs that are larger will take too long to download to be very practical so you will need the help of your image editing program to make them smaller. Low resolution digital cameras are not very expensive and may actually cost only slightly more than a decent scanner. Of course, you will probably want both, but it is probably best to first buy a scanner to scan the pictures you now take with your conventional film camera. If you don't have a camera now, maybe a digital camera would be nice. Older low resolution digital cameras may be bought used on eBay for very little money. Don't spend a lot of money on a digital camera until you know what you need for features. It is very easy to over buy and spend too much money if your objectives are just to shoot web photographs.

Illustration/drawing programs are useful for creating your own web graphics to the specifications you need for your projects. There are many, many programs on the market to help you create illustrations and some of them offer a lot of sophisticated power that you could spend a lot of fun time experimenting with. You can even work with animations and other interesting graphic effects for your site. The image editing program you bought with your scanner or digital camera is not good for creating illustrations so they do not provide the logical expansion into illustration as you may first assume. This level is very advanced and is not something to jump into quickly as you could with a scanner. You will have to learn the programs and that may also mean understanding how various complicated graphic systems work. Further, you will have the problem of converting your finished artwork into web compatible graphics. The better programs will do this for you automatically but it is possible to create professional quality graphics with other programs and then use your image editing software (Photoshop is about the best for this) to convert the artwork and also allow you to make any last minute adjustments.

JavaScript is a computer programming language that allows you to create a wide variety of scripts (computer programming routines) that you add to your web page. Working with JavaScript means you will have to learn computer programming. There are a lot of practical uses for JavaScript and other programming languages and the web designer should at least be aware of some of the features and possibilities available. JavaScript is also the kind of language where you start with an idea, "I'd like to..." and then write a JavaScript program to do exactly that.

What many people don't understand is that web pages can be functional in many ways besides what the viewer sees on screen. In the background many things can be happening that are largely technical and essential for the proper operation of the site. JavaScript provides the tools to increase the functionality of your site. Besides, a graphic designer who is skilled in JavaScript and other programming should be a very desirable and highly paid employee!

There are a lot of books available to help you learn about JavaScript. You can even learn about JavaScript by going online to any of a number of sites that offer scripts as freeware or shareware. You can download them and include them in your own web pages following their instructions to avoid copyright problems. But more important, you can also study the scripts and slowly learn how to create your own scripts. Be careful, for if you took apart someone's script and made changes to it, it is still their script and you would be in violation of copyright laws. You can study the script and figure out how it works and then create your own from scratch (don't use their exact code!) and this might be legal. It's also an excellent learning exercise.

All of the above! The real web designer and producer will use all of the above equipment and software as necessary to get the web pages and site they need. There is a lot to the world of web design and you should develop as much of an understanding as possible. Perhaps some areas, such as JavaScript, may not appeal to the graphically oriented, but without even the knowledge of knowing what can be done your pages may be limited as a result. And if you decide to hire someone to do the programming for you, at least you will understand what they are doing and how to work with them better.

Sites as opposed to pages
Although it is possible to have a single page where the viewer will cursor endlessly passing all sorts of information and graphics until they get to what they are looking for. This is very tedious and shows a need for organizing information. Take books, for example, where they are divided into chapters. There is also a table of contents and index to help readers sift through the information. All this is in an attempt to organize a large quantity of information.

When you look at web page production as a process of organizing and presenting information to your viewer, you begin to realize some of the difficult problems you may have to face. Information may be divided into logical topics with each topic placed on its own page. The results will be what can be called a site as opposed to a single web page.

What now becomes necessary is a concept of navigation, allowing the viewer to move as freely through the information on different pages as easily as possible getting to what they want. It can be difficult and the larger the site, the more difficult the navigation problem. The organization of information into pages requires a design and many people think that this is a perfectly acceptable definition for the term "web design". It is all part of the process where you must design a way of making the information easily accessible by all viewers.

In your experiments you should devise yourself a problem which requires that information be developed into a site as opposed to a single web page. Try and make the project as simple as possible for you are going to create a large number of individual pages. Some of your objectives should include maintaining a uniform design so that the viewer feels comfortable they are still in your site. You will also have to devise page linking systems and actually program the necessary HTML so that when the viewer requests a certain page they will actually get to that page and, when they are finished, be able to return to the home page.

Of course, the final realization is that you must make each and every single page a pleasant visual experience. Each page must be a workable design in itself as well as integrate with the rest of the pages in the site. Developing sites is far more complex than producing individual pages so be sure and master page design and development before attempting to produce an entire site. But while you are studying individual pages, give some thought as to how you might work this into a much larger site.

Will this ever end?
No. When producing web pages, there is no level you can reach where the page can be certified as complete. There is always room for improvement, always a place for adding something else. Over time new tools and techniques will be available as new and improved technologies are added to the market. Things that are undreamed of today will be tomorrow's everyday production standards. But be careful with your experiments and start small and slowly develop skills and understanding. It's going to take a lot of time and effort but it can be a lot of fun, not to mention potentially profitable.