|
Heart of Ohio Great Pyrenees Club, Inc.
|
|
The
HOGPC Web Page Advisory
Committee Page
|
Welcome to my little corner of the world.
The committee (namely me) takes pride in what has been accomplished to date.
The success of this web site could not have been possible without the contributions
of content and feedback by the club members and visitors.
Since this web site represents the result of the committee activity, I suppose it best
to simply suggest that the viewer take a look around and see all that has been
acomplished, and consider all that is being planned by the existence of the
"empty" web pages.
For now, I'll use this page as a quick (those who know me are probably laughing
at the thought of my creating a quick anything) introductory lesson in the
use of Hyper Text Markup Language (HTML) to create documents and web pages.
Those viewers that are HTML savvy will probably find many faults in this document.
To them I will simply say that most of us learned that the counting numbers we
encountered in our first years of schooling were trivial to those complex number
concepts we later learned.
HTML is really, or at least was, the bread and butter of the Internet.
Unfortunately it has largely been replaced by (run-on sentence alert) ...
complex server-side scripts, which ...
generate on-demand HTML, with ...
accompanying embedded client-side scripts, which ...
are all feed by databases, which ...
include visitor-specific data that ...
is often tracked via the use of client-hosted data caches called "cookies".
HTML, and eXtended Markup Language (XML) for that matter, are all sub-sets of the
Structured General Markup Language (SGML) that can be used to create, I believe,
press-ready documents.
Most of the information on the internet seems to be static in nature.
With that in mind it seems that a large number of web pages are using rocket
science and Orwellian tracking techniques to deliver a simple pamphlet.
Even this web site utilizes much of the complex architecture described above.
Not because the club needs the tracking information, but due to the reality
of hosted web sites ... the host company needs revenue for the expense of hosting
the site, so they require advertisements to fund their efforts.
The web pages for this site use very simple encodings that are made
complex by the host site, in an automated fashion, during the process of uploading
the files.
Back to the task at hand...
HTML documents are very simple in nature and might best be thought of as gift
wrapped packages.
There is an outer wrapper that contains a box, which in turn contains some item(s)
that are all made of pieces-parts, etc., etc., etc.
Consider the following text that could be the complete contents of a file
on your local computer.
<html>
<head>
<title> Hello World! </title>
</head>
<body>
<p>
This is my <b>Hello
World</b> page!<br>(grin)
</p>
</body>
</html>
|
HTML encoded documents don't require that the lines be indented the way I have
displayed them here, and they are indented in this example for ease of
readability alone.
The items within the angle brackets ("<" and ">") are called tags and represent
the page layout instructions that the client application or browser
(ex: Mozilla, Netscape, Lynx, Opera, Internet Explorer, etc.)
uses to format the page for processing and display.
Tags are almost always to be found in pairs, the 2nd of the pair
being prefixed with a "slash" to indicate that it is the "closing" member
of the tag pair.
Also, capitalization of the tags isn't important at this point (that comes later for
XML, XHTML, SGML, etc.).
Depending on your browser you might be able to cut-and-paste the contents of the box,
above, into a text file called hello.html (you may need to call it
hello.htm (sans "L") depending on your computer configuration).
The HTML tags (remember this means both <html> and </html>)
are the outermost wrapper that holds all of the page information.
Inside the HTML tags are two tag pairs... HEAD and BODY, which
must not overlap or become nested within one another.
For that matter almost all of the tags must be organized in a way that they do not
overlap with other tags.
However, most can be nested inside each other, in pairs, like the famous
Russian toy dolls.
The HEAD section is used for mostly non-visible page control information.
The BODY section contains the visible information presented to the viewer.
For the HEAD section the only control tag we use in this example (there are many others)
is the TITLE tag.
The TITLE tag tells the browser what "text" to display in the title bar of
the display window.
The information is not part of the window contents, just the title bar.
For example, if you look at the window that this web page is displayed within,
you should see that the title is set to something like
HOGPC: The Web Page Advisory Committee Page.
For the example in the box you would see
Hello World!
displayed.
The title might also contain some additional browser-supplied text.
The BODY section is the meat and potatoes of the page (love those food references).
The simple example above contains but a single command to display a paragraph, marked
with the P tag.
An important thing to mention again, at this point, is that tags almost always should be
paired with a closing version of the tag.
In this example I have shown a </p> tag to be as faithful to the HTML
specification as possible, and to start you off on a good foot toward XML or
other encoding methods that are extremely picky about tag pairing.
The reason that this is important to mention at this time is that the </p> is
often omitted by web page designers because the early generation browsers were
created with enough smarts to know that if they encountered a second <p> tag,
or just about any other tag for that matter, without having encountered a
</p> tag, they could simply assume the existence of the
closing condition and move along.
This promoted a lot of page creation that while compliant with the browsers, were not
completely in compliance with the HTML standards.
And before you look at the source of THIS page I'll come forth right now and admit that
I am often a non-compliant web page developer :)
Ok, so we have started a paragraph that will display the text
This is my Hello
and
World page! and (grin) inside a browser window.
To visualize what will happen you will need to know that the B tags cause the
included text to be in BOLD face.
The BR tag causes a line break that causes the remaining contents to be
continued on the next line.
So, in the end, what the viewer will actually see inside the window should be
something like:
This is my Hello World page!
(grin)
|
At this point an observant viewer might ask "Hey! Why did the Hello and
World show up on the same line when they were on separate lines inside the file?"
The answer lies in something I mentioned at the very beginning of this brief (huh?)
tutorial...
HTML encoded documents don't require that the lines be
indented the way I have displayed them here, and they
are indented in this example for ease of readability alone.
What happens inside the browser is that it ignores, in almost all cases, any end of line
characters (returns), as well as "white space" characters (spaces and tabs) that do not
have critical meaning for display control within the source file.
Instead it relies entirely on the included tags to determine exactly how a
web page should be displayed.
With this new understanding it should be obvious that the following example box will
produce identical browser window contents as that of the example box shown above.
Take note that the spaces that used to be between the P (paragraph) tag
and the text that follow is missing here because the browser knows that it would not
impact the display of the text itself.
<html><head><title>Hello World!</title></head><body>
<p>This is my <b>Hello World</b> page!<br>(grin)</p>
</body></html>
|
So why do we care about any of this?
One reason is that the creation of documents, either delivered via a server or stored
on our local machine, no longer requires a specific operating system or browser to
edit or view.
The source file of an HTML encoded document can be edited by almost any editor from the
simplest text editor to the most advanced word processor to a specialized HTML editor that
color-codes the tags for enhanced readability!
All that is required is that the file be a simple text file.
People that use mainframes, any of hundreds of variants of Unix boxes, and/or
embedded devices (ex: next generation cell phones), can all view these web pages
to at least some degree, as easy as their Macintosh or Wintel counterparts.
Even disabled people benefit from these encodings in that special browsers have been
developed, which can effectively translate the web pages into a form that can be readily
utilized by them.
Additionally, in a much as 50 years we will still be able to easily read these files.
We may not be able to say that about the documents from popular word processing
applications that store their files in a proprietary binary format.
If you are interested in further study of HTML there are an enormous number of books,
magazines, and classes on this subject.
After all, I have only scratched the surface of HTML.
We didn't even get into:
- other text modifiers like italics, underline, etc.
- numbered and unnumbered lists (like this one)
- the WONDERFUL world of tables
- frames
- hyper links to documents and media
- document descriptors and style sheets
- embedded images, image maps, and sounds
- ... and a world of other features
If you take a look at the source text of this page you can see many of these
other tags put to use.
You will be surprised at how simple this all really is once you consider what I
have done and why it works the way it does.
For the initiated, you might want to take a look at the large volume of documents
found on the
Internet Engineering Task Force (IETF)
and
World Wide Web Consortium (W3C)
web sites.
Finally, I encourage you to take the example HTML file above, save it on your
local machine, and open the local file in your web browser (this can often be done
simply by double-clicking on the hello.html file in a graphical file manager
such as Windows Explorer.
Most people are unaware that you can create an entire suite of linked pages on their
local machine where you don't have to be online to view and navigate.
In fact, that is exactly the method I use to maintain this web site!
--- Dean Fouras
October 18, 2002
Don't forget to take a look at the
About the HOGPC Web Site
page.