weave your web, and build your place in cyber-space

How a Web Page Works
DIVIDER BAR

The Web is known as a client-server system. Your web browser software is the client; the remote computer which stores the data is the server. For instance, when you are looking at the NACD's website, your computer has requested the web page from a server located in Washington DC.

The glue that holds the Web together is called hypertext and hyperlinks. This feature allow electronic files on the Web to be linked so that you can easily jump between them. On the Web, you navigate through pages of information based on what interests you at that particular moment. This is commonly known as browsing or surfing the Net.

To access the Web you need software, such as Netscape Navigator or Microsoft Internet Explorer, known as web browsers. How does your web browser distinguish between web pages and other files on the Internet? Web pages are written in a computer language called HTML, which stands for Hypertext Markup Language.

Netscape and Internet Explorer browsers do not interpret HTML instructions in the same way. That is why you need to check your pages in more than one browser if possible. For example, the graphic web spider at the top of this page shows a black line on the right side of the image in Netscape, but show no line in IE. The navigation table at the bottom of the page shows a green background and a solid border in IE but no background and a 2 color border in Netscape. The browsers are interpretting the HTML mark up language differently. The more complex the page the higher the possibility that the page will look better in one browser that the other.

How a web page works is not rocket science. It helps to know a some HTML even when using WYSIWYG (that's What You See Is What You Get) editors like Netscape Composer and Front Page Express because the "wizards" that make these programs compose web sites assume you have some understanding of the subject.

HTML is the language of the World Wide Web. All HTML is composed of the 128 ASCII characters, though other characters can be represented in the final, rendered document. HTML consists only of the ASCII characters, and can be composed in any text editor. However, there are some text editors which have some extra bells and whistles designed especially for HTML authoring. There's nothing these special editors can do that you can't do with a plain old text editor, but if you're just starting out, you might feel more comfortable using one of them. Netscape Composer and Front Page Express are two editors that don't require significant understanding of HTML. Other great HTML editors like Arachnophilia can be found at most shareware sites like Tucows.

HTML - Hypertext Mark Up Language

One thing to note about these special editors: since HTML is far from settled as a standard, you won't find any program designed to help you author HTML that knows all the tags.

Source Code (or "markup" if you are a purist) Why is it important to know some source code?
Just a little understanding will really help you understand how search engines list you web site and how you get "found" by visitors. This is an important factor in marketing your conservation web site. After you build it, you people to see it.

Let's look at some Source Code in your browser.
In Netscape, look under VIEW, and select PAGE SOURCE. That should create another screen that shows you the source code for the page. This is a good way to look at a page that you are thinking about using as a template. If it has java scripting or applets, or relies on an image map it may be too complex to use as a template page. Also, you may be surprised that some complex pages rely on tables instead of sophisticated coding languages. Many sites with heavy traffic use tables because there is less to go wrong when viewed in a variety of browsers.

In Internet Explorer, select VIEW, then SOURCE and the page will open up into Notepad. This makes it very simple to save the file. You simple save the file as a filename.txt document, then later change the filename to filename.htm which makesit a web page file that you can manipulate in any HTML or WYSIWYG web editor program.

Here is a quick translation of common HTML mark up tags. Notice that most tags are in pairs. More extensive information on HTML tags and their use can be found at The Bare Bones Guide to HTML.

 

 
Basic Tags
_____________________
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn't displayed on the Web page itself
<body></body> Sets off the visible portion of the document
 
Header Tags
_____________________
<title></title> Puts the name of the document in the title bar
 
Body Attributes
_____________________
<body bgcolor=?> Sets the background color, using name or hex value
<body text=?> Sets the text color, using name or hex value
<body link=?> Sets the color of links, using name or hex value
<body vlink=?> Sets the color of followed links, using name or hex value
<body alink=?> Sets the color of links on click
 
Text tags
_____________________
<pre></pre> Creates preformatted text
<h1></h1> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size=?></font> Sets size of font, from 1 to 7
<font color=?></font> Sets font color, using name or hex value
 
Links
_____________________
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
 
Formatting
_____________________
<p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote>
</blockquote> 		Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
<li> Precedes each list item, and adds the bullet
<div align=?> A generic tag used to format large blocks of HTML, also used for stylesheets
 
Graphical Elements
_____________________
<img src="name"> Adds an image
<img src="name" align=?> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?> Sets size of border around an image
<hr> Inserts a horizontal rule
<hr size=?> Sets size (height) of rule
<hr width=?> Sets width of rule, in percentage or absolute value
<hr noshade> Creates a rule without a shadow
 
Tables
_____________________
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
 
Table Attributes
_____________________
<table border=#> Sets width of border around table cells
<table cellspacing=#> Sets amount of space between table cells
<table cellpadding=#> Sets amount of space between a cell's border and its contents
<table width=# or %> Sets width of table - in pixels or as a percentage of document width
<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#> Sets number of columns a cell should span (default=1)
<td rowspan=#> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit  
 

To learn more about HTML:

Other preliminary web site considerations:


  1. Limitations on web site design
     
    • Layout is not precise- It's approximate
       
    • Everyone will get a slightly different picture based on the browser they use, and the configuration of their computer.
       
    • File size and the fast load - Graphics and photos can really slow down load time. Watch your file sizes and keep them as small as possible and don't forget to include the file size of the graphics in your calculations.

     

  2. Tables, Frames, and your initial Pages
     
    • Tables - are commonly used, and can really be effective if creatively done. Tables are readable by nearly all browsers. This web page uses a table for the navigation set at the bottom of the page.
       
    • Frames - are less commonly used. Keep in mind that frames involves multiple pages, and are hard to print out from. Some browsers don't handle frames well.
       
    • K.I.S.S. - Keep your web site simple, using color and tables for best effects. There is less to go wrong.
       
    • Graphics - bigger is definitely NOT Better! Use smaller graphics or graphics with fewer colors and lower resolutions to increase load speed. People don't like to wait for pages to load. Most commonly large pictures and graphics are what slow page load times down. Your whole page including the graphics should be under 64K
       
    • Cutting edge means cutting some visitors out. Certain types of web features like style sheets are not viewable by the majority of web browsers. This will change over time, but for now, keep to the common web designs that allow the largest audience.
       
    • Stay "mainstream" on your web pages for greatest accessibility. A unique but exotically busy site with intensive use of the unusual graphics can be seen at: Lavendise which looks and acts very different in Netscape than in IE. Overall the techniques work for this site because the features are directly tied to their audience, but I wouldn't recommend these busy effects for a District site - or your first web page. Do NOT use this page as any sort of template.
       
    • Don't Blink! Blinking text can be used for emphasis, but blinking text and animated graphics and scrolling type all in the same window is very hard to view. It competes with your content. Avoid it, unless you really need it. A case of "overblink" can be viewed at: Virtual Horse Graphics which has fine equine graphics you can use on your web pages. However, all the blinking icons make the page very hard to read, even though it is a very simple layout.
       
  3. Pre-planning for site maintenance - do not build what you can not maintain!
     
    • Static Sites versus sites featuring current events: If you have limited time to work on a web site and don't plan to update it very often, then avoid placing date sensitive material on your site. If you only want to work on the web site once a year, stick to interesting local material and great pictures that people will want to "Bookmark".
       
    • Links to offsite material: If you have links to off-site materials on your web pages, be sure to schedule a periodic check of the links. People don't like dead ends.
       
NACD Workshop 2: Web Design
created by Cyber-SierraRUNNING HORSE
Your Internet Presence How Web Sites Work Say What? Design Basics Navigation
Get Repeat Visits Edit your Pages Need a Pro? Need a Domain? Market your Site
 
Workshop :Introduction to the Internet  Back to Workshop 1 Forward to Workshop 3   Workshop :Practice Web Pages

Conservation Jobs Center |  Conservation Grants Center |  Oak Run Library |  Cyber-Sierra 

Workshop Location: http://www.cyber-sierra.com/workshops/99workshops/intro.htm