Web www.rcaguilar.com

HTML & Web Design
German Folksongs
Spanish Folksongs



Site Background

*In the Works

Richard C. Aguilar
Basic Steps in Website Design
Designing a website has become a relatively easy venture nowadays and needn't be costly. One of the most significant factors in web design is the number of browsers in public use along with preference settings for each individual user. Standards and guidelines are set, but because of the many individual differences no two browsers present the same viewing. This is good to remember when developing your own website.

Put your design on paper first. Make an outline draft (rough draft). Shape the spaces you want to put images into. Shape where you want to place the text. Use sketching and free-hand placement. Rough hand-drawings are fine. Then use a program like Photoshop or Paint Shop Pro to design your color-scheme(s).

In designing your webpages, decide how you want your text to look – choose fonts, font sizes, colors, bold face, italics, etc.

HTML - http://www.w3schools.com

All information on a web page reflects information as dictated within opening tags <***> and closing tags </***>. In order to see this page in its coded form, right click on the screen and then right click "view source" on the menu that pops up. This will bring up a "code" view of this page. You can view the source of almost any website using this technique.

You may require the use of an HTML editor or other program to build your website. The following chart includes several commonly used web editors, with the first 2 listings being freeware (costs you nothing!). If you're already employed within a school district, you might want to check with the Academic Superstore for a greatly reduced price.

HTML Freeware
Microsoft Front Page

If you choose not to use an HTML editor or other program to build your site with, you need to know enough HTML to do it in Notepad or Write (any text editor). MS Word can save documents as web pages, but inserts overwhelmingly excessive tags.

For an excellent overview of HTML, along with simplified explanations, see: http://www.w3schools.com. This free site provides lessons in HTML – as well as many other types of web design tactics. They provide a complete listing of current tags, current web production tips and issues, and a considerable learning experience through example.


Cascading Styles Sheets are useful in designing your web pages because they provide all of the basic information for all pages at once. The use of CSS cuts down on the size of your pages, and covers the whole “styling” of your webpage design. It is used to designate fonts, font sizes, font colors, alignment, different partition styles – practically any design element for ALL pages in your site in one document.

Take a look at this sample webpage file. A CSS website http://www.csszengarden.com/ shows you what your CSS file can do for a single text file. An off-shoot of this site that offers variations for the same text file is at: http://www.mezzoblue.com/zengarden/alldesigns/bydate/. Keep in mind that all of the pages represent the exact same text file.

Text Files, Sound Files, Images, Power Point, Flash, etc.

In creating your website, it is important that you maintain your data in a logical set of folders and objects. If you will use sound files or graphic images, you should position these in separate folders from your text files. This obviously depends on the size of website you are producing.

Your root file is always known as “index.html.” This is the document that any server will present when your web address is provided in the address bar. All other pages can be named whatever you wish, but have the extension “.htm” after each title. It's also a good practice NOT to leave spaces between words in naming your files.

Sound files can be embedded into your webpage through special tags. When you link a sound file to a page and a user views your page, most often the computer in use will play the sound file - as long as it has the software to do so! Most common sound file extensions in use today are .au, .wav, .mp3, .ra, .rm.

Images and movie files are also easy to embed on your pages, but careful attention needs to be given to sizing, resolution, and file extension. Again, if the browser has the software to present the file, it will. Some computers have default settings that take .mov files away from your browser into QuickTime, thus losing your viewer's connection to your site.

Host / IP / Domain Name

Decide where your website will be housed. Your website has to be available on the internet through a server, which will serve the pages once your “site name” is entered into the address bar. If you are in a school system that has its own website, and provides space for teacher websites, you've got it made. You can easily upload your pages onto the school server, without concern for how your site is to be found via the internet.

If you purchase a web hosting package, you will receive an IP address (or DNS), which is the numerical address associated with your site’s name. A Domain name can be purchased through Register.com, Network Solutions, or many other sites offering this service. Once you have purchased a Domain Name, it will be up to you to “point” the name to your DNS – where your site is hosted.

Many online/internet services offer a one-page or 50 Meg website with their service, and provide you a “/~name/index.html” indexing location. This can work fine for a website – but is very limited in how and whether it will be found for viewing by a great audience.

VI. FTP for transfer of files and maintenance

Once you feel that your site is publishable, you will need an FTP program (file transfer protocol) to transfer your files to the server. Once again, if you purchase a hosting package, the host frequently provides this service through its site maintenance pages. It is still recommended that you use a separate FTP program, in order to maintain more control and a better overview of the pages in your site.

For a free FTP program that is reliable, http://www.internet-soft.com/ has FTP Commander. Versions change frequently, and updates are constantly available.

VII. Contact Page vs. Email Address on site

One area to be wary of is the use of your email address on your webpage. If you have a generic email address through hotmail or Netscape, it is less drastic to make this address available to the public. A preferred method of contact is the Contact Page, which requires technical know-how. The reason for avoiding using a personal email address is because there are many spammers who pick up your email address, and start sending you anything and everything that you don’t want to get!

VIII. Metatags, Search Engines, and Site Submission

When you are developing your pages, take special care to insert valid and proper meta-tags. Many of these tags provide background information for your website, including the author’s name, date of production, revisions, keywords, a description, etc. These tags are used by search engines to locate term-related data from computers world-wide.

Many search engines also provide a “Site Submission” section in their web pages, so that you can submit your site for spidering and inclusion in search results for anyone seeking information of the type you are providing.

IX. Link Validation

If you are providing links in your site to information from the internet, be sure to check frequently that the links are still valid. One of the most irritating points of the internet is the loss of link validity. Sites change, are dropped, become stale, or simply cease to exist.

X. Affiliate Programs

You can also make money on your website, by joining affiliate programs. You need to be business-oriented if your site is “sales.” A very good program to join at this time is the Google Adsense program. Don’t expect to generate a lot of revenue from your website, but getting anything back out of it is worth the effort!

XI. More Resource Sites for Further Information:
Index DOT Html
HTML Goodies


If you have specific questions or need further explanation of any item in this presentation, please send an email to: rca@rcaguilar.com. Feel free to visit any of the following websites: