How To Make A Home Page

Back To Tech Support Home Page

 
Web sites are not just for computer geeks anymore! Just about everyone is getting a personal Web Site. Dasia.Net makes it easy for you to publish your site on the Internet. First, however, you should understand a few things about how to build a successful Web Site:

Understanding How Pages Work
Understanding HTML
Working With Graphics
Design Tips 
Advanced Techniques
Publishing Your Site
Promotion Of Your Site

Understanding How Pages Work
When people think of the Internet, they usually think of the World Wide Web. That's because, while the Internet has many components, the World Wide Web is the most interesting, colorful, and dynamic part. The Web lets you look at everything from cooking recipes to pictures of Elvis, lets you view animation and short movies, and lets you hear speeches, songs, and sound effects. While building pages like these may seem like a difficult task, building your own homepage will really be pretty easy. 

Your Web browser translates special files on computers called servers into the words and pictures you see when you surf the Net -- into Web pages. Those special files are called HTML documents. HTML stands for HyperText Markup Language. While this sounds a little scary at first, these HTML files are actually simple text files that can be created on simple word processors. This means that all you need are programs like Microsoft Notepad or Macintosh SimpleText to make your very own Web page. 

Understanding HTML
Hypertext Markup Language (HTML) can be described as a set of special codes referred to as "tags," that instruct a web browser how to display a hypertext document. Think of it is as a collection of styles (indicated by markup tags) that define the various components of a web page. 

All HTML documents are in plain text (ASCII) format making them universally readable by different web browsers running on different computer platforms. HTML tags consist of a left angle bracket (< or "less than" symbol) followed by the name of the tag and closed by a right angle bracket (> or "greater than" symbol). Some HTML tags, like the ones used to indicate a new paragraph <P> or a line break <BR>, are stand-alone units. Most tags however, are paired, with a beginning (or open) and an ending (or close) tag. The ending tags are the same as the beginning tags except they are preceded by a forward slash (/). A typical pair of tags look like this: 

<STRONG>and</STRONG> 

Each tag in a pair is placed around the text or section that you want to define ("mark up") with that tag. For example, if you want to begin a section of your document with a heading like "My First Web Page," you would use one of the six levels (sizes) of headings available in HTML and it would look like this: 

<H1>My First Web Page</H1> 

Here's a table summarizing the most common tags. 

Every HTML document needs a title. The <TITLE> tag goes inside the document header and should describe the contents of the page. This is especially important if you are going to register your pages with Internet directories. You can have only one title per document and it should be in plain text. In other words, there shouldn't be any tags or strange characters inside the title. 

There's a wealth of information on the Internet that will explain just about anything you could possibly want to know about HTML. 

Sandia Labs' HTML Reference Manual 

HTML: An Interactive Tutorial for Beginners

Take a look at the HTML Bad Style Page for a useful list of HTML Don'ts. 

If after exploring some of these resources you're feeling adventurous, why not give it a whirl? All you need to start is a text editor like Notepad and a web browser. Compose your HTML pages with your text editor and save it as a text-only file with a .htm extension. Then open the file in your browser to see what it looks like. (Keep in mind that an HTML document can appear different in different browsers.) You can go back to the original HTML files as often as you like to edit them. You'll see for yourself how simple it is. 

Working With Graphics
The best designed websites use graphics sparingly. Because high-resolution graphic images are very complex and large, by the time you convert them into an appropriate format for the Web, they look much less compelling. This is one of the current limitations of the Web. Whether you are reusing existing artwork or creating new art, keep in mind that the demands and requirements of online design are different from those of other media. Even the most accomplished graphic designers may not be aware of the specific design issues involved with graphics for the Web. Here is a summary of the most important things to keep in mind:

Smaller Is Better
 
The key to creating graphics suitable for web pages is to keep the file sizes small. That way, they will download quickly. Large graphic files can take a long time to download, especially at slow modem speeds. You don't want impatient people leaving your site before they've had a chance to see or read your creation. 

Remember, you want to concentrate on keeping the file size small, not necessarily on keeping the graphic itself small. The file size is determined by the amount of information in the image. A file with a large graphic and only a few colors can actually be smaller than a tiny graphic with many colors. Ideally, file sizes should be between 20 and 30K each. At this size, they will load almost instantly. Larger images, such as the masthead or banner you place at the top of a page, can be as large as 75K. But at this size, the image alone can take close to a minute to download with a 14.4 modem. Although this may not sound like a long time to wait, it is when you're sitting in front of a computer. A good rule of thumb is to keep the total image file size per page at 100K or less. 

To get a graphic file small enough to put up on the Web, you have to convert it to one of two formats: JPEG (a compression method developed by the Joint Photographic Experts Group) or GIF (Graphics Interchange Format -- a compression scheme developed by CompuServe). GIF is the more common of the two, probably because all web browsers have built-in support for it, whereas some web browsers may require a separate, "external" viewer application to display a JPEG file.

To convert your graphics to a web-readable format, you will need image-editing software to create or modify the artwork you want to use. If you are working with a large site, you can benefit greatly from programs designed to help you catalog and manage your graphics and graphic elements. Sometimes these can be accomplished with one program and sometimes it's better to use separate utilities. These programs can range in cost from $15 for shareware to more than $500 for robust programs like Adobe PhotoShop. 

Guidelines for Designing and Converting Graphics 

Whether you use GIF or JPEG, here are some guidelines for working with graphic files:

Always design in RGB (red, green, blue) mode at 72 dpi (dots per inch) with an 8-bit maximum size. Many computer monitors display a maximum of 256 colors, and this is the Web standard. The fewer colors you use, the smaller the file will be. For example, 8 bits give you 256 colors to play with, 3 bits give you only eight colors. You'll be surprised at what you can do with only eight to 16 colors and your readers will be pleased with the snappy downloading time of your pages. 

Converting existing high-resolution graphics usually means reducing the image from 300 pixels or more per inch to 72 pixels per inch. This can make a big difference in the appearance of an image, creating jagged edges, or gaps where colors have been removed. Use techniques like indexing and dithering to fix these problems. Dithering or diffusion fills in missing colors in a uniform way to make the transitions between colors smoother. You should only dither an image once, because the more you dither, the blurrier the separations get between colors. In some cases, you may have to open the lower resolution GIF and touch it up, pixel by pixel, to get a clean result. Also, when working with palettes, stick to either the "Adaptive Palette" or the "System Palette" 

If your image contains large text, it may have jagged edges. Try anti-aliasing it. Anti-aliasing is a specific technique for smoothing over the jagged edges you sometimes get when fiddling with fonts in digital graphics. 

For snappier looking graphics, make your images transparent. This entails changing the background color to match that of the page (which more often than not is gray) so your image appears to float on the page. 

Design Tips
In the interest of better Web design, we offer some tricks to improve load time and presentation:

Be careful you don't have images (such as a banner or a masthead) that run across the top of your screen and off the right-hand side of the monitor. This can happen if you are designing your web graphics using a high-resolution monitor. Again, many monitors display images at a resolution of 640 x 480, so if you're working with a high-resolution monitor, chances are you've probably designed your mastheads or banners at a width of 570 pixels or more. At this width, your graphic will spill off the right of many screens, affecting the look and overall presentation of your pages. The best way to avoid this problem is to keep graphics at a width of 470 pixels or less. 

Save images as "interlaced." This allows a GIF to load into the browser as a fuzzy, pixelated picture that slowly comes into focus via a shutter effect. Whether this is a pleasing effect is a matter of taste. Test your graphics both with and without interlacing to see for yourself how it will look. If you are displaying large graphics, such as photos, give your readers the opportunity to decide if they want to see them or not. The best way to do this is to make a "thumbnail" or miniature version of the graphic, that links to a larger version of that image. The thumbnail gives readers a preview; if they are interested in seeing the larger version they can click on the thumbnail. It's always a good idea to warn people if they are about to download a very large (more than 50K) graphic. Do this by including the file size in parentheses next to the thumbnail. 

Some Netscape extensions to the <img> tag can speed up downloading time for those viewing the Web with Navigator browser.. If you specify the "height"and "width" of the graphic within the image tag, Netscape Navigator knows how much space to set aside for the graphic, and it begins downloading the text immediately. If you don't specify these attributes, the browser will immediately start calculating the image sizes first. Another Netscape extension is the "lowsrc" tag, which instructs the browser to load a low resolution version of a graphic at first, and then go back and load the higher resolution version after it has loaded everything else. Both of these tricks allow readers to start reading text right away, rather than waiting for a page to fully download before they can see any part of it. 

A border is displayed around each linked graphic. This border is the same color as all other hot links on the page. This may or may not be visually pleasing. If you don't like the way it looks, you can suppress the border by adding "border=0" to the <img> tag. You can also add additional tags to align the graphic to the right or left of text or to the top, middle, or bottom of a graphic. These extensions are not universally supported and can result in your page layout looking radically different -- even sloppy in different browsers, so take them with a grain of salt. Test your pages in several browsers to see how they will look, then make adjustments as necessary. 

Finally, as a courtesy to people who are reading your pages with a text-only browser, include an "alt" tag inside the image tag with a brief description of the image. 

Software Tools for Editing and Managing Graphics 

Windows Software:

Adobe PhotoShop: for Windows: A powerful graphics program. 
GT Icon Extract: For extracting icons from Windows EXE and DLL files for use on your web pages. 
PaintShop Pro: A graphics viewer, converter, and editor. 


Advanced Techniques
HTML has come a long way since it was first created, giving web designers more graphical layout options. However, HTML by itself provides almost no interactivity beyond the ability to "jump" from one document to another or from one area in a document to another. 

Nevertheless, there are ways you can turn a static site into dynamic ones, enabling visitors to do a number of things directly from your web page. For example, readers can search for information in a database, e-mail comments or select several items from a form and get a customized reply. Up until now, this type of interactivity has been accomplished through the use of something called a Common Gateway Interface script, commonly known as a CGI or gateway script. 

Common Gateway Interface (CGI)
 
Simply put, a gateway script is a program that runs on a web server and is triggered by input from a browser. The script is usually a link between the server and some other program running on the system, like a database. Most of the work happens on the server, behind the scenes. You only witness the result. The beauty of CGI is that it allows this sort of two-way communication through the use of HTML. 

The front end of the web page, then, is programmed in HTML, and the gateway script usually is written in a programming language like C or PERL. Gateway scripts can be used for a wide variety of web applications, ranging from the very simple to the complex. For example, a simple CGI script might let you put a counter on your web page to track the number of visitors (or "hits") or it might automatically update each page with the current date. 

The most common use of CGI scripts though, are for implementing image maps and forms. An image map is a graphic image, usually a large one with distinct areas, that has different URLs associated with its different regions. A gateway script for an image map keeps a list of the coordinates associated with the URLs. When you click on a particular region of the image, the browser feeds the coordinates to the server, which uses a script to locate the correct URL and return the appropriate HTML page to the browser. 

The real value of gateway scripts, however, is realized through the use of fill-out forms. These can range from simple e-mail forms or data entry boxes for searching, to complex surveys with multiple choices or purchase order forms that process orders online. A form is set up in HTML in a way that lets the reader (or client) enter information by selecting buttons, pulling down or scrolling through menus, entering text into data entry fields, or varying combinations of all of these features.

At the bottom of the form there are usually two buttons, one to reset and clear the form in case the user wants to redo it and one to submit the data. The submit button is the trigger that sets the process in motion. It sends information to the server pointing it to the CGI directory and the appropriate script to run the procedure. 

Here's the sequence of events:

1.A URL points to a gateway script the same way it points to any other document on the server. The browser requests that URL from a server just as it would any other document. 

2.The server receives the request, notes that the URL points to a script (based on the location of the file or based on its extension, depending on the type of server), and activates that script. 

3.The script performs some action based on the input from the browser (for example, querying a database, calculating a value, or calling up some other program on the system). 

4.The script formats the result in a manner that the server can understand. 

5.The server receives the result from the script and passes it back to the browser, which formats and displays it for the reader.

Each script has a special header that gives the server, and eventually the browser, information about the output it is sending. That way, it knows how to properly format the output at each step of the process. The header isn't actually part of the document and it's never displayed anywhere. 

CGI is now widely used on the Web and probably will continue to be for some time to come. However, some new tools in development promise to open the doors to more sophisticated ways of expression and communication, taking interactivity on the Web to another level.

Shockwave
 
Another widely used tool is a product called Shockwave from Macromedia, Inc., the maker of Director, an animation and authoring program. Shockwave is a "plug-in," a piece of software specifically designed to work with an existing program. Shockwave plug-ins to whatever web browser will support it and plays Director animations embedded on a web page, in real-time. That way, you don't have to wait to download the entire animation file before it begins to play. 

But downloading even a small animation can take time, making the web page on which it resides appear to load very slowly. Macromedia has developed a compression method, called Afterburner, that reduces the size of a Director animation (or movie) so it can be downloaded more rapidly. 

Both Explorer and Navigator support Shockwave, so if you don't already have it, you can download it from the Macromedia site. Once you've installed the plug-in, visit the rapidly growing list of Shockwave sites. Back to top 

Java
 
Although Shockwave represents another milestone for the World Wide Web, the real breakthrough in interactivity and multimedia content delivery is a programming language called Java. Developed by Sun Microsystems, Inc., Java may be the next wave in computing. This powerful object-oriented programming language uses a Java-enabled browser to run the same type of animations that Shockwave, as well as a lot of other interactive applications. 

Like a gateway script, Java is activated by a special HTML tag. Unlike gateway scripts, which require information on the server to run applications or process input, Java enables developers to create content that can be delivered to and run by users on their computers. This software can support anything that programmers can dream up, from spreadsheets and tutorials to interactive games and different types of animation. 

A well-done Java application on a single web page can engage a user for a long time. Rather than just providing text, sound, images, or videos to observe, a Java page can offer a place to play, learn, or communicate and interact with others in a way that isn't necessarily based on going somewhere else on the Web through hyperlinks. In this way, Java turns the Web into a software delivery system in which users have things to do rather than just places to go. This offers the potential to transform the surfing behavior of web users into one of playing and learning in new interactive environments. 

How does it really work? Java makes Java browsers "smart" enough to interpret and execute the content, instead of relying on servers to provide information and functionality. When downloading a web page that contains the special hypertext tag called "APP," the Java browser knows that a special kind of Java program called an "applet" is associated with that page. The browser then downloads a file of information that describes the execution of that applet. This file of information is written in what are called bytecodes. The Java browser interprets these bytecodes and runs them as an executable program on the user's computer. All of this downloading and execution happens automatically. When a Java browser requests a web page, here's what happens: 

1.The HTML document is returned to the user's browser. The document contains the APP tag, which identifies the applet. 

2.The corresponding applet bytecode is transferred to the user's computer. This bytecode had been previously created by a Java compiler using the Java source code file for that applet. 

3.The Java browser on the user's host interprets the bytecodes and provides the display. 

4.The user may have further interaction with the applet without further downloading from the provider's Web server. This is because the bytecode contains all of the information necessary to interpret the applet. So now, instead of the server computing a result, the Java browser becomes the mechanism for computation. 

The potential of Java to transform the Web with new applications for commerce and information delivery awaits the imagination and skill of tomorrow's developers.

Publishing Your Site
As a Dasia.Net member, you are entitled to 2Mb of disk space on our server to host your web site. Simply contact Dasia.Net to setup FTP rights to your directory. The FTP address for your site will be ftp://ftp.dasia.net/yourloginname. Once you have completed your web site, simply FTP all the needed HTML and graphic files to your directory. Voila, you are on the Internet. Updates you wish to make to your site can be made at anytime. The URL of your site will be http://www.dasia.net/yourloginname (please name the first page of your site 'index.htm' and use the '.htm' file extension on all HTML files).  You must request for this free service first.  Please call our office during regular business hours and speak with a service representative.  704.225.1776

Promotion Of Your Site
As the newest frontier for interactive communication, the World Wide Web offers the potential for tremendous exposure, even notoriety, if you know how to use the medium to promote yourself and your work. There's a variety of ways to bring traffic to your corner of cyberspace. How much and what kind largely depends on the content or service you offer and how you've designed your website. 

Competing for attention with hundreds of thousands of other sites makes the task challenging. Don't be discouraged, though. With realistic expectations, you can increase the chances of people finding your website. 

Register your Site with Search Directories 
 
Search engines such as Alta Vista and Yahoo! receive literally millions of hits a day, because people use these tools to locate specific information on the Web. Free and simple, this is probably the most often overlooked way to get people to your site. The fundamental trick to the Web (and the Internet as a whole) is finding information. What better way to increase your visibility than by being where everyone goes to find things? 

With a free service called Submit-It! you can register your site with dozens of search engines, in one simple step. Go to the site and fill out a form with information about your site. Then select the sites you want to submit that form to. Be sure to read the FAQ for a better understanding of how the process works. 

While SubmitIt! makes the process easy, the best results are obtained by registering with each search engine individually. That way you can customize the registration information to reflect the unique attributes of each directory. To do this, you'll have to actually go to each directory website and fill out the online form. While you may not want to do this for the dozens of online directories on the Web, our advice is to it for the major search engines. 

When registering with these directories, it's important to determine how you want your site to be categorized and by which keywords you would like to be identified. For example, if you are a retailer selling health-related products like vitamins and herbal remedies and also include a recipe index for nutritious dishes, you would probably register under the Health and Fitness category. Or you could register under the Commercial/ Business category and include keywords that relate to specific content at your site, such as melatonin, papayazyme, and lowfat recipes. 

Although Yahoo will let you register additional categories, most of the others will only accept your URL, so the best way to ensure that people can find your site is to make sure the text on your home page accurately describes the site's purpose and contents. Whenever possible, document titles and file names should be self-explanatory. This will increase the odds that your site will turn up in more searches. 

You should also be aware that once you register your site, it can take weeks before the listing shows up. Check each directory regularly to make sure the listing is there. If it hasn't appeared after a month, contact someone at the directory service to find out why your listing isn't there. Don't be afraid to be aggressive. It works! 

Announce Your Site to Other Indexes

Several sites maintain updated lists of what's new and "cool" on the Web. Unlike the directories, these places do not automatically list your site just because you send them your information. Usually someone will review and evaluate your site before adding it to the list. That's why being listed in one of these indexes has prestige. One of the most popular sites is Netscape's What's New page. Plenty of other indexes list sites by category or type. You'll have to do some research to find the ones that are appropriate to your particular site.

Post in Newsgroups or Mailing Lists
Give this one some thought. Don't blindly use these forums as a way to promote your website, or you might unwittingly get flamed or harassed. If the content of your site has something valuable to offer a specific audience, then by all means find the appropriate newsgroups and mailing lists and let those people know about it.  This is not the same as SPAM.  Anyone caught spamming on our network will be disconnect and reported to the proper authorities.

Use Advertising, Marketing and PR
 
Traditional marketing methods can be highly successful, assuming you have the money to invest. If you decide to place print ads in various publications, make sure they are targeted to your audience. If your website is designed for classic car enthusiasts, don't advertise in a travel magazine. 

Be sure to include your site name and URL in all of your advertisements and marketing materials. Send press releases to the ever growing list of Internet-related publications. If your budget supports it, you might consider hiring a web-savvy Internet marketer to help you spread the word and come up with creative ideas for generating traffic to your site (games, contests, etc.). 

Advertising online is another way to go. Banner ads on websites can run a few hundred dollars a month to many thousands of dollars. In general, when you by ads, whether in print or on the Web, you are paying for the number of impressions - the number of times your ad is seen. The rate is also determined by how highly targeted the audience is. For instance, if you are selling graphics software, you want to reach graphic artists. If you advertise to a general audience, most of those people will have no interest in your product. So while it may cost more to advertise to a targeted audience of graphic artists, the chances are greater that they will have an interest in, if not buy, your product. 

The Power of Links
 
We've saved the best for last. Don't underestimate the value of links. Find websites related to your area of interest and ask their webmasters to link to your sites. Many sites will do that for free, especially if you reciprocate. With so many new sites coming online, this should be an ongoing process. 
 

Featured Sponsors: