Doing Web Pages

by Tom Bruce
(aka tomb)

-- Getting to Square One --

I am caught with the idea of being able to communicate with you .. or anyone .. anywhere in the world .. and anytime.  I have no special communication skills, but I am thinking that maybe this  Internet-thingy  just might be one of them social "phenomena" that points me toward those "shifting paradigms" .. people always talk about.  In any case, it seems 'portant to know something about web pages and all .. so .. I began looking to find out how to make me a web page.

I know there are elements of web page crafting in text editors, word processors and even in eMail .. but these writing tool have other purposes and don't pretend to do it all.  I mean,  I can't help but wonder how The Internet is able to merge text, images, music, voice, video, and other types of content.  I imagine the day when I might even having the ability to share my interests with a world of people out there--so this grand goal is important to me .. but only if I can find out how to use it.

I decided to do a web page and (with much advice) I began to study HTML, the computer language underpinning all web page constructions. HTML is (said, simply) a set of tags that you place before and after each web page component. Your browser understands these tags as "commands" to build the web page according to your design. For example .. suppose you wanted to display a paragraph which has the content, "Rubber Baby Buggy Bumpers."

Using HTML, I need to place a "<p>" tag before these words and a matching "</p>" tag afterwards (note the "/") to get:

                                                    <p> Rubber Baby Buggy Bumpers.</p>

These two tag-commands tell your browser to create a paragraph, that would look like:

                                                             Rubber Baby Buggy Bumpers.

The browsers, then, clips the tags off before it displays the content. As you can see, it all is a very simple and the idea of "tags" is really no different than another  form of "punctuation."

HTML is said to be "tag-driven" so there are as many tags as features. Some tags control the placement of pictures and others turn on font characteristics such as "bold," "underline" or even change it's "size."  Other tags are used to create tables and numbered lists. In other words, every feature you see when you are "browsing" web pages has it's own unique set of tags. All you have to do is learn what a few tags can do, insert them into a simple text-file and let the browsers do the rest.

You can even experiment with web page building without going onto the net, itself. Simply try out a few tags then call up your browser to look at the results .. off line.  I'll show you some examples of what tags can do, below, using only a text editor such as "notepad." Even with these few introductory ideas, you should be able to understand, by inspection, how this tag system works.   You don't even need other fancy-smancy software to build a test web page just to get a "feel" for the details.

A couple other things to remember. Every feature begins and ends with a tag and you may even include tags within tags. For example:

                                             <p>Rubber Baby <strong>Buggy</string> Bumpers.</p>

where the <strong> tag turns on the "bold" characteristic to get:

                                                                  Rubber Baby Buggy Bumpers.                                

Some tags have additional design parameters that vary how the browser will handle it .. but don't let this confuse the basic idea of using tags. By the way, HTML stands for Hyper-Text Markup Language and the "markup" part are the tags!

Still, there is something else .. important about HTML that makes it very different from all the forms of communication: that we learned in school. HTML recognizes (those blue-clickable) URL-tags that call up other web pages-- usually located elsewhere, in the World. What a feature! HTML and The Internet have given me the (virtual) ability to go anywhere I want to .. or just "jump" around on my page (.. a feature called "bookmarking").  So its very simple to get started.. first practice with a few tags on some test page/s and then sit down to write up your first real web page.

Well "simple," .. until you begin to building you own web page.

We people are complex. Our life experiences are complex. What we know and want to communicate to each other are no less complex. I felt that anything worth while appearing on my web pages, ought to approach these human complexities else it would not be useful.  In my case, I wanted to start with a page that not only represented my personal interests but it had to have useful content--content that reflected real diversities and worthwhile to the viewer. To me, this is what "content" is all about.

I wanted my page to be seen quickly so that the content could be discovered quickly.  Soon, I discovered that I had problems. As the page began to grow, it took longer and longer to downloaded.  My page changed everyday since I had many updates and additions that reflected  changing content. Each time I changed my page (here), all user-browsers (there) had to (re)load the entire page. This is bad news for slow-modem users as they would not quickly find the new content. The solution to this problem lead to some serious thinking about structure--file naming and organization. I'll talk more about this later.

There was another important problem. Normally, each topic has multiple sub-pages and each sub-page has multiple images and multiple URL-addresses (to other resources).  If I did manage to create a web page, I found that I would have a devil of a time trying to maintain it. That is, all those tags began to look like some cryptic mush and it took hours to update the content  and find and correct old URLs as they ceased to exist.

I realized that this was going to be an impossible task but each time I sought out HTML experts they only recommended more HTML --but I also noticed that most HTML page makers create only simple pages--mostly text and many seemed to be enamored with blinking icons, flashing colors .. or worse .. large corporate logos that take "hours" to download. I also noticed that content did not seem "that" important to them and many of their web pages had successfully hidden useful content. This was not the way I wanted to go.

The solution came quickly. In fact, I had passed it over several times. Dummy me .. just get a Web Page Editor .. I did this and soon all the HTML code difficulties disappeared. But before I leave this introduction, I want you to know that I'm glad that I learned basic HTML and I can only recommend that all web page builders learn basic HTML as you build pages with an editor.  Often, I jump back into HTML to quickly correct a problem that I can't seem to correct with an editor..

.. and now the details ..

Sample HTML code vs. Web Page (side-by-side)

             Some tags used:
            <html> <body> <p> <a> <h1> <strong> <em> <big> <div> <center> <table> <tr>  <td> <img> <ol> <li>

             Some parameters used:
             name=   align= href= border= cellpadding= cellspacing= width=  src=  alt=

            and some special characters used:
            &lt  &nbsp

             A Web page is divided into three tagged-sections:
              <html>   .. a tag used to tell the browser that a web page follows (This MUST be the first tag appearing on you page)
               <head> .. a tag used to mark the beginning of an (optional) informational section .. I left this out!
               <body> .. a tag used to mark the beginning of the web page feature/s

       - notice that for every tag <x> there is (normally) a closing </x> tag

       - *all* spacing is controlled by HTML .. that is .. any space or placement of objects that you insert .. are ignored!

       - On the Web Page version, bookmarks appear as dash-underlined while URL appear in blue color,
                  In the HTML version, params appear in red color

               - sometimes you can guess the meaning-use of the tag .. then again .. maybe not!
                          e.g.  <p> starts a paragraph .. (easy!)
                                <h1> starts a level-1 header
                                 <tr> starts a row of a table containing cells, <td> .. ordered left to right
                               <em> starts italics .. ("em" stands for "emphasis")
                          <strong> starts bold font
                                  <a> means "anchor" .. (??? go figure!)
                                 <ol> starts a numbered list with an element <li> .. ordered top to bottom
                               href=   param inside a tag that identifies a "http" reference .. that is .. a URL address
                             &nbsp stands for a single blank-space .. as a special character
                                  &lt   stands for "<" ie the "less-than" special character

raw HTML version with tags corresponding Web Page

!!! removed !!!

a name="top">top</a>&lt;-- is a bookmark</p>

<h1 align="center">This is a Title with Header Tags</h1>

<p>This is a sentence without any special tags.</p>

<p>This is a sentence with <strong>bold type</strong> and <em>italic type</em> and <big>character enlargement.</big></p>

<div align="center"><center>
table border="1" cellpadding="2" cellspacing="1" width="70%">

td width="50%">Here is a 2x2</td>
td width="50%">centered</td>

td width="50%">table</td>
td width="50%">with text</td>

td width="50%">and an image</td>
td width="50%"><img src="web.jpg" alt="web.jpg (20188 bytes)"></td>


<p>Here is a numbered list:

<p>and a URL:&nbsp; <a href=""></a> &nbsp; to click on</p>

<p>or jump to the bookmark .. <
a href="#top">above</a></p>



top   <-- is a bookmark

This is a Title with Header Tags

This is a sentence without any special tags.

This is a sentence with bold type and italic type and character enlargement.

Here is a 2x2 centered
table with text
and an image web.jpg (20188 bytes)



Here is a numbered list:

  1. Cat
  2. Dog
  3. Cow

and a URL:   to click on

or jump to the bookmark .. above

                                                                                          End Part-1