HOME ¦ WEB PAGES ¦ SAMPLES ¦ PUBLISHING ¦ CONTACT_ME

Publishing

Contents

Publishing Concepts Keeping Content Separate from Style and Format
Markup Language SGML versus HTM/HTML
HTM/HTML Tags Text Editors versus WYSIWYG Editors
Headings H1, H2, H3, H4, H5 and H6 Levels
Paragraph Tag <P>
List Tags Unordered, Ordered, Definition, and Directory Tags
Table Tags Tables, Rows, Columns, Captions, Headers, and Footers
Boxes Blocks and Inline
Character Formatting Tags Big, Bold, Underscore, Italic, and Fonts
Cascading Style Sheets A more powerful way to control formatting and display
Anchor Tags How to get where you want to go!
Image Tags A picture is worth a thousand words!
Frame and Form Tags A brief mention to discuss their use.
Use of Scripts on a Host Server Just a taste of my experience!
WEB PAGE Structure Level of Markup, Head Section, Body Section
How This Web Page Was Created With Corel WordPerfect and Notepad
Sample Web Pages
Last Page

Credits

The author worked with IBM's Document Composition Facility for some 25 years before retiring in 1991, and marketed that program and used Standard Generalized Markup Language (SGML) in publishing work. He has reviewed the material in "HTML for Dummies" by Ed Titel & Steve James, published by IDG Books Worldwide, Inc. in 1995, and has used as reference material "Web Publishing with HTML and CSS" by Laura Lernay and Rafe Colbum, published by Sams Publishing in 2007. The later is an excellent "Teach Yourself" in one hour a day manual. I have studied "Web Design in a Nutshell, Third Edition" by Jennifer Niederst Robbins, published by O'Reilly Media, Inc. in 2006. I am currently using Sams Teach Yourself PHP, MySQL and Apache ALL-in-ONE (3rd edition) byJulie Meloni, 2007, and PHP 5 fast&easy web development, also by Julie Meloni, 2004, published by Thompson, Course Technology. Some of the best teaching material is just opening a web page on the Internet and using the Browser's "view source" option to see how other authors create web pages!

I will give assistance to anyone locally who is trying to learn how to create a web page using this material. You can reach me by phone at 845-679-2989 or E-mail at willowwnds@aol.com or by just clicking on the following linkage and giving me your name, phone number, e-mail address and a message. All parameters must be filled in, but need not be real. Send Message to Don Warren

Publishing Concepts

Publishing involves the printing of documents or distribution of them electronically.

Word processor programs cast documents in a fixed style and format determined during the keying of that document. They have line-endings, carriage returns, tabs and other formatting codes embedded in the text. Such documents are not easy to print in other styles or formats. The good thing about these documents is that what you see (while keying them) is what you get (WYSIWYG) when printing or displaying them. And the editor programs usually provide spell checking. But they are not in the format used by browsers on the Internet!

Publishing, on the other hand may have a requirement to present the material in a different style or format depending on the intended use, type of printing process, or display device. Computer monitors come in different sizes, and have programs which present information in windows which may have many sizes and screen resolutions.

For example, some copies may need to be printed with smaller type, say for a paper-back book. The publisher may want to change the style of type. Other copies may need to be printed with larger type for older people with poor vision. And when displayed on a monitor device, the user may want to zoom in for larger type, and the text area may be narrower or wider, and only support different type styles, etc.

Topics not covered extensively in this document include: Input forms (in depth), JavaScript, blinking text, moving text (marque), live audio and video output. A good reference book will expand on these topics.

Markup Language

To accomplish this flexibility, a markup language can be used to identify the kind of text, say a heading, a paragraph, a list of items, or a table. The actual text can not have any imbedded (hard-coded) formatting controls, like line-ending, or typewriter carriage-return codes.

Standard Generalized Markup Language (SGML) has been used for years for publishing books and manuals. Typically, markup is indicated by tags inserted into the text, usually using a text editor. The tags have to be differentiated from message text. One scheme uses a colon attached to a character, for example: Colon "p" period (:p.) would be a paragraph tag. Nowhere in English is a colon followed immediately by a character. The period serves as a tag terminator. This kind of tag has long been used in SGML documents in the printing and computer industry.

A similar kind of "p" tag, with different delimiters, was used by World Wide Web Internet browsers in the so called Hyper Text Markup (HTM) language. In this case, the paragraph tag was used by early browsers to indicate the end of a paragraph, not the beginning! The creators of this language did not really understand SGML. Soon they had to change the paragraph tag to a "start of paragraph," and for compatibility to earlier World Wide Web browsers, add a new "end tag." This stupid arangement is with us forever now, except in the real publishing world! There is only one reason for keeping end tags where they would not otherwise make any sense, namely if one wanted to put a different heading level within another heading! In actual practice, if the end paragraph or list tag is missing, the document may still format correctly, but CSS style information may not work as intended.

The HTM tag delimiters used are the less-than (<) and greater-than (>) key strokes, which identify the start and end of an HTM tag, respectively. These characters rarely occur in normal text. When they do, special symbols (&lt;) and (&gt;) can be inserted to create them. Thus the HTM/HTML paragraph tag looks like: <p> and it's end tag (designated by the slash) </p>.

There are some other major differences between previous SGML and HTM or newer HTML tags. These tags not only identify the type of text, but provide linkage from one part of the document to another, or linkage to another document on the same or another server. They also provide positioning and image display information. One thing missing from hyper text markup is pagination (page numbering). Text can not flow freely from one column (or page) to the next. Each file is one LONG page. Without page numbering you have no need to generate a table of contents showing page numbers or an index of page numbers. Therefor there is no facility for creating leader lines (dotted lines between an item and it's page number) in a table of contents or index. Instead, links can provide the means for jumping directly to the desired topic. However, leader lines would be useful on a menu with a price list! Or on a printed document.

Note that what looks good on a computer display may not print the way you would like. The W3C standards committee is working on media tags which would allow a web page be set up to display one way and print another way. This can already be accomplished because they have defined a "screen" media which some browsers have implemented. Thus, even though a "print" media has not yet been implemented, if you use the default CSS style statements to control how it looks on paper and the "screen" media statements, you really have much of what you need today. They are working on media standards for page numbering, flowing text, video, audio, etc. One thing you might not want to see in print is the navigation information users click on to jump somewhere else. Using CSS attribute VISABILITY:HIDDEN you can make something disappear during printing. Do this to the navigation tags in the base style and set the "screen" CSS attributes to VISABILITY:VISIBLE to make them display on the computer monitor. Some browsers have a print setup option allowing you to change orientation, and margins, and add page numbering to the printed output. Internet Explorer does an automated "shrink to fit" if your pre-formatted text is too wide to print, while Mozilla Firefox just truncates it! Note also that the the C in CSS stands for CASCADING which means that parameters set previously are usually inherited by subsequent markup unless specifically overridden by subsequent tags lower in the hieharchy. Between differences in browser implementation and the effect of cascading this can become a tricky business!

Note that some printed material needs to be displayed in columns to make it more readable. This can be accomplished manually for short documents, but would be too time consumming to do for a large file. See a sample of two column output.Testing this document identified differences in implementation between Internet Explorer and Mozilla Firefox browsers which required modification before they would display it the same way! There was no perfect solution and I finally left out putting a "border" line between the two columns which would display the same with both browsers! Clearly, you will need to test your web page under multiple browers to be sure they look the way you want them. Some 80% of users use Internet Explorer so that is the most important browser market. But collectively, the others are also important.

And something like an enlarged dropped initial capital starting a line of text takes some doing to create! See example. Another strange implementation is in the display of a definition list. Normally, SGML would place the TERM and its definition starting on the same line, but offset. HTML places the definiton on a second indented line. I have developed a work-around which creates the normal SGML style (see example). Hyper text markup is an evolving technology so there are multiple levels of browsers and standards. Older markup may no longer be supported by newer standards. And browsers have their own bugs making it necessary to test your web page by as many different browsers as you can locate.

The problem using markup is that you don't see what it will look like when you key it into your computer unless you use a special WYSIWYG editor. In other words, to see the formatted result, you must save the edited text (CTRL + S keys), and click on the file name (In the folder listing) and use the browser to format it (Click on the "refresh" button to see the just saved file if it's still open). This is a repetitive process. After viewing the result you must leave the browser and return to the editor to continue (Just click in the text area if the file is still open). There are ways to accomplish this without leaving either environment. If either window is hidden, click on the tool bar at the bottom of the screen to reactivate the hidden display. After a refresh the browser display will be about where it was before so you shouldn't have to re-locate where you were. If the text editor does not have a spell check feature you can leave enough desktop exposed to click on your browser to access a search engine like Google, since these programs will usually ask you "do you mean" and give you the correct spelling of any word you copy and paste into the search line. Also, the topics located by the word you entered will suggest if this is the word you meant to use. This is a lot quicker than getting out of either the editor or the browser displays and then getting back in and having to locate your position or use a dictionary. When saving a file with a text editor, you have to override the default file type (.txt) with the markup (.HTML) file type by selecting "all files"!

Shortcuts: My text editor uses CTRL + F to activate FIND, then ENTER to search or exit "not found," and the TAB key to move around the "find" menu, and the left and right arrow keys, plus ENTER to select up or down. To exit a window, use ALT + F and UP or DOWN arrows and ENTER. To logoff, click the windows key, followed by UP and ENTER, then right arrow and ENTER.

There are ways to navigate in a large document - putting links into the text and a table of contents with links, and in the editor, using the FIND function. There are short-cut keys in the editor which are easier to use than moving the cursor with the mouse. If both source file and displayed output are visible at the same time (minimized) the scroll bars show approximately where you are in both files. Just line the two displays up side-by-side,and if necessary, overlapping them.

Special HTM WYSIWYG editors present their own problems: They tend to insert a large number of old and unnecessary control characters into the document! These make it more difficult to understand what is being created, they take up storage space, and create a heavier document transmission load every time someone accesses your document. A document accessed by a large number of people could result in server load charges! Additionally, these editors usually only work with documents they have created and can not be relied upon to make changes in documents created manually or by another editor!

When viewing the source of someone else's web page I often strip out the garbage inserted by WYSIWYG editors to better understand what they are doing and to get a "clean" copy. I can create better web pages using CSS statements instead of the older styles generated by these editors. The source for almost any web page may be viewed, saved, and modified to meet your needs. Be careful if it is marked "Copyrighted."

HTM/HTML Tags

Early browsers just displayed the structure of a document, i.e. - headings, paragraphs, lists, etc. Then the browser wars began and each vender tried to outdo his competitors with new features, especially in the area of display, i.e. - different fonts, images, background color, text color, etc. Now the effort is on meeting standards, compatibility, and separating markup of document structure from style and display determinations. Some of the early markup tags are being replaced with style codes. Search engines need to understand the document structure to better index a document. They need to use heading, paragraph, list, and table tags, and do not need to use font, color, size and graphic information for indexing.

Generally, there are six levels of headings: <h1>, <h2>, ... <h6>. Each level can have different fonts, different font sizes, different font colors, and a multitude of absolute or relative positioning controls (margin-top, -bottom, -left, -right, -justify, -center, -float, etc.) through the use of style statements. In fact, most of the markup tags can have any and all of these style descriptors applied to them.

Paragraph Tag

In typical SGML, ending tags were not required (i.e. - a paragraph tag and text was ended by another paragraph tag, a heading tag, or many other tags).

For some reason, HTM/HTML tags have grown to require STRICT compliance with a requirement for end tags: I.e. - A paragraph tag (<p>) followed by the paragraph text must be closed by a paragraph end tag (</p>). The slash indicates it is an end tag. Likewise, a heading tag (<hn>) requires an end tag (</hn>). Many end tags create an end of line and a following (blank) line space. Using "display:inline" CSS style code information, many such tags can be changed into an inline format. (See boxes, below). Using margin-top and margin-bottom tags with negative quantatives can override some of these defaults.

If you are a poet there is some good news. The <pre> tag lets you use pre-formatted text. What this means is that where you don't want the browser to format the text, as in a poem, you can use this tag to stop it. Mark-up still works, say for headings and navigation, but outside of mark-up all of the blank spaces and blank lines you put in stay there! This eliminates a whole lot of tags and makes it easier to copy text to or from a word processor. And when you copy large sections to a word processor to do a spell check, the absent mark-up tags don't confuse the spell checker! To end the pre-formatted text, use the </pre> end tag. Note that lines containing markup tags in pre-formatted material may leave blank lines in the browser output, so stacking multiple tags on the same line can minimize this effect. Note that tab characters in pre-formatted text create tabbed output in web pages (but not in non-pre-formatted material). Also, quote or double quotes provided in text transferred from a word processor may not display as quotes in web page output!

List Tags

There are tags to mark ordered lists <ol>, unordered (bullet) lists <ul>, list items <li>, definition lists <dl>, definition terms <dt> and their definitions <dd>. An "unordered" list can be created using a bullet list and specifying no bullets! You do have good control over the numbering (numbers, Roman numbers, letters, or capitol letters) or decoration (i.e. - bullets, etc.) of list items! Other old type list tags include the menu list tag <menu> and the directory list tag <dir>. The directory list was used to create a series of columns but now works mostly like an unordered list with indentation but without the decoration (bullets). Note: you can also insert lists within lists and paragraph tags inside a list.

Table Tags

Tables tags were intended to present tabular data, but because of descriptive markup limitations of HTML, tables were used to control presentation, like providing background images, combining images and text, boxes around text, centering text within cells, etc.. Table tags include <table>, table rows <tr>, and table columns <td>, table headers <th> table captions and table footers. There are also row-group, column-group, and col tags. Refer to a textbook for more information on these tags or locate where they are used in other web pages.

Images can be displayed in small sizes and be made to expand to one or two larger sizes when clicked on (See Anchor Tags). Width attributes may be applied to tables, table cells and to images placed in cells. Usually, the browser considers this to be a minimum width and will expand the table and cells to contain all of the data. Look at some one elses work to see how tables can be made to work! Unless otherwise specified, browsers make tables the shortest width and heights possible. Sometimes you may have to add blank characters to a cell to make it wider. The widest cell determines the width of all the cells within that column. If the data in a cell will not fit, they will wrap the line. If there are more lines in one cell than it's neighbor, they will vertically center the shorter cell. Use &nbsp; to create a hard coded blank character. A string of hard coded banks can be extended by regular blanks in between. Except in pre-formatted text, multiple blank characters or blank lines are excluded in your output by the browsers.

Boxes of Text (Blocks and Inline)

There are some markup tags which can group a block of text together but have no predefined formatting characteristics. There is the division tag <div> which lets you create a block of text and can apply attributes to the entire block (alignment, left, right, center, fonts, font-sizes, margins, padding, etc.). Margins control white space outside the "box" while padding sets white space inside the "box". Note that the display:inline CSS statements can give blocks the attribute of in-line text, and the display:block can give text the attribute of a block, with box properties having margins, padding and positioning! An example of how different browsers treat boxes can be seen by clicking on file: ( publishing/colors.html). Try this using different browsers!

Then there is the span tag SPAN. Where the DIV tag appears to be more global in use, the span tag is more often used within a line of text or paragraph. The division tag can not be used within a paragraph. But I have not found any restrictions on where the span tag can be used. These tags can have style information assigned to them using CSS. WYSIWYG editors frequently use the span tag to insert font information into every heading or paragraph tag!

I. e. - <p> <span style="font:arial;font-size:14px;font-weight:400" >, followed by the text being controlled, and the end tag </span></p>. This was important early-on, before Cascading Style Sheets (CSS) provided a better way to do it. Now, this is a horrible and unnecessary repetition from paragraph to paragraph!

Character Formatting Tags

There are a variety of character formatting tags, most of which can be replaced using CASCADING STYLE SHEET (CSS) statements. Center <center>, citation <cite>, <blockquote>, bold <b>, italic <i>, emphasize <em>, big <big>, underscore <u>, and font <font>, are available to name a few. Most of these have defaults, so don't worry about them now. Each requires both a begin and an end tag. All end tags must be in the reverse order to their respective begin tags! Note: Standards people say it is better to use emphasize rather than italic, and strong instead of bold, and CSS statements instead of underscore (they can create the same thing but the older tags may not be supported in the future). However, I prefer the simplicity of just using <u>, <b>, <i> and <big>!

The horizontal rule <hr /> and line break <br /> tags have no end tags, but to make them compatible to earlier browsers, it is recommended that they have a blank character and slash before their ending character. The image tag also has no closing tag and can have a blank and slash ending. The horizontal rule has a width attribute (e.g. - <hr width="75%">) which sets the width of the rule and centers it. For example:


The line break tag also has a (clear="all") attribute which can be used to cause any subsequent text to be pushed beyound any images or blocks with the float attribute. The no-break <NOBR> ... </NOBR> tag sequence keeps text all in one line. The <WBR> specifies a potential break point, especially good within a NO BREAK enlosed line. The line break tag <br /> forces a new line. Two of them as somewhat equivalent to a paragraph tag.

The font tag is better replaced using CSS statements. However, here is a list of some of it's attributes: face="Times New Roman, Helvetica", where this is the name of the font type, listed in the order of decending priority in case the computer does not have the preferred font face; and size="n", where n is a number from 1 to 7, with 3 being normal; color="blue", where blue could be any of 16 named colors, or a six character hexadecial code for some 256 colors, with leading # sign (e.g. - "white" is also color="#00000" and "black" is color="#fffff"). Sometimes you will see a short cut code where every pair of digits are the same, #000000 may be coded as three characters #000 and #ffffff as #fff.

Cascading Style Sheet Statements

Heading, list, table, span and division tags create blocks or boxes of text to which CSS statements may be applied. Headings, lists, tables, and division tags start a new line before and after the block, and may insert a blank line. Other formating tags, like center and the list-item <li> just start a new line but do not create a following blank line. Tags which cause formatting changes (underline, bold, big, italic, or emphasize) and span tags do not create a line break. All of these tags can have formatting or style changes added using Cascading Style Sheet (CSS) statements. While CSS statements can add to a tag's function, they may not override the underlying function of the tag. The following CSS statements can be included as an attribute of another tag in the form of STYLE="color:red;font-weight:bold" (see example above), or be placed within a STYLE BLOCK (in the HEAD Section or External CSS Style Sheet). CSS statements in a STYLE BLOCK or External CSS Style Sheet must start with a tag name, a list of tag names separated by commas, or a "nested" list without commas, as identifiers. The attributes of these named tags must be surrounded by curly braces { and }. For example, the following statement would make all heading one (h1) text be displayed in bold red type:

h1 {color:red;font-weight:bold;} Applies to ALL heading one (H1) tags.

The following list of tag names would make all heading two and three (h2 and h3) text orange:

h2,h3 {color:orange;}

The following nested list of tag names would make a SECOND LEVEL ordered list (nested, list within list) text green:

ol ol {color:green}

In addition to tag names or lists, these CSS statements can further be qualified by class, or identifier:

h1 {color:red} This CSS statement applies to ALL heading one (h1) tags.
p {font-size:20pt;} This CSS statement applies to ALL paragraph (p) tags.
.hot {color:aqua;font-size20pt;} This one applies to ANY tag with a "CLASS=hot" modifier:
<h1 class=hot> ... </h1> (example)
#big {font-size:24pt;} This one applies to ANY tag with a "id=big" modifier.
<li id="big"> ... </li> (example)
p.hot {font-size:36pt;} This one applies ONLY to a PARAGRAPH tag with a "CLASS=hot" modifier:
<p class=hot> ... </h1> (example)
p.hot h1 {color:red} Applies to both the heading one (H1) and the paragraph tag with "CLASS=hot" modifier.

Exaamples of CSS statements which apply primarily to text blocks or boxes:

EXAMPLEDESCRIPTION
color:red;Sets Text Color (white, black, red, yellow, aqua, etc.)
direction:ltr;Set direction of Text, left to right (ltr) or right to left (rtl).
display:inline;Contents of block (inline, block or list-item).
float:left;Box attached to one side (none, left, right) so text can flow around it.
font: ... Can set all font properties.
font-family:Helvetica, san-serif;Prioritized list of font Family or Generic Names.
font-size:16px; Font size (pixels, points, large, etc.)
font-style:oblique; Font Style (normal, italic, or oblique).
font-variant:normal; Normal or Small Cap Display.
font-weight:bold;Font Weight (boldness).
visibility:hidden;Can hide text
letter-spacing:92%;Change Intercharacter Spacing.
text-align:left;Align Text Within an Element (left, right, center, justify)
text-decoration:underline;Underline, Overline, Line Through, none
text-indent:100;Indents First Line of Text within an Element.
text-transform: Controls Capitalization of the Letters of text.
white-space: Sets White Space within an Element,
word-spacing:92%;Changes the Space between Words.
background-image:URL( ... );Link to Image File
background-attachment:fixed;Fixed
background-color:red;(see colors)
background-repeat:repeat;Repeat, norepeat
position:absolute;Box position (static, relative, absolute, fixed or inherit)
border:0;Four Sides: Border-Width (n), Border-Style, Color
border-left:0;Border-Width (n), Border-Style, Color
border-right:0;Border-Width (n), Border-Style, Color
border-top:0;Border-Width (n), Border-Style, Color
border-bottom:0;Border-Width (n), Border-Style, Color
margin:Space outside the box on all four sides, normally in pixels.
margin-top:Space outside the box, above the box.
margin-bottom:Space outside the box, below the box.
margin-left:S[ace outside the box, left of the box.
margin-right:Space outside the box, right of the box.
float:left;Attaches box to left side of parent so text will flow around it.
float:right;Attaches box to right side of parent so text will flow around it.
padding:Space inside the box and content.
padding-top:Space inside the box and between the top side and the content.
padding-bottom:Space inside the box and between the bottom side and the content.
padding-left:Space inside the box and between the left side and the content.
padding-right:Space inside the box and between the right side and the content.
top:0;Position depending if absolute or relative. Use two positions (i.e. - top left, top right).
left:100;Position - Use two positions (i.e. - top left, bottom left).
bottom:Position - Use two positions (i.e. - bottom left, bottom right).
right:Position - Use two positions (i.e. - top right, bottom right).
z-index:n;Specifies stack level of absolute or relative boxes (auto, an integer, inherit).

Definition lists display the term on one line and the definition, indented, but on another line. CSS can override this allowing the definition starting on the same line, but confined to a block. A display:block, margin-left: 20% and margin-top:-1.1em yields the normal format for a definition list in the SGML publishing world. The margin-left:20% sets the amount of indentation, and the margin-top:-1.1em moves the definition up to where it is about inline with the term. EXAMPLE:

The Term:
A data definition. But with display:inline applied to both dt and dd, it puts the start of the definition on the same line as the term but it wraps the end of line under the term (does not indent). However if only the dd tag is changed by display:block and margin-left and margin-top values are set, the desired result is created.
Second Term:
Another definition.

The following CSS statements were used in developing this proceedure:

div#dd {width:70%} // Used just to force a shorter block width to show how it wraps in this example.
dt,dd {display:inline;} // Puts the definition on the same line as the term but wraps without indentation.
dd {display:block;margin-left:30%;margin-top:-1.1em;} // This one CSS statement is the complete solution!

Other than the <DIV id="dd"> tag used for this demonstration, normal definition list tags were used.

One of the printing capabilities not specifically supported by Markup Tags or CSS statements is the ability to print enlarged-dropped-initial capital letters at the beginning of a paragraph. Here is one way to accomplish this. Note that it appears differently on different browsers!   EXAMPLE:

A

bout dropped initial capitals. This could be sweet if it works - i.e. - wraps under the initial capital without a lot of extra space. The values used may need to be adjusted to fit the font size.

The CSS statement to control the dropped initial capital is:

p#drop {font-size:72pt;float:left;margin-top:-.2em;margin-bottom:-.2em;}
The margin-top:-2em raises the enlarged initial capital while the margin:bottom:-2em raises the point where the subsequent text will wrap to. With different font sizes these numbers may need to be adjusted.
To continue the line aligned with the top of the initial capital just use a normal <p> tag.
<p id="drop">A</p>
<p>bout dropped initial capitals. This could be sweet if it works - i.e. - wraps under the initial ...

Another Example:

O

ne last thing about inserting comments into a web page. It is a good idea to comment what you do so it is easier for you or someone else to perform maintenance on your web page. A comment in Markup tags begins with <!-- (the comment), and ends with -->. Comments in CSS are different. They may be just a double slash (//) where the rest of the line is a comment, or a longer (/* ... comment ... */) sequence, which may extend across multiple lines.

One last thing about inserting comments into a web page. It is a good idea to comment what you do so it is easier for you or someone else to perform maintenance on your web page. A comment in Markup tags begins with <!-- (the comment), and ends with -->. Comments in CSS are different. They may be just a double slash (//) where the rest of the line is a comment, or a longer /* (comment) */ sequence, which may extend across multiple lines.

The W3C standards committee is a consortium which provides documentation on Cascading Style Sheets (CSS).

Anchor Tags

The anchor tags (<A> ... </A> ) allow the end user an option to display something (like an image) or jump from one place to another within the web page or to another web page. This is especially important since browsers do not recognize physical pages and the information is better presented using a "tree" structure with links. The "A" link or anchor tag has the following attributes (quotes are required around all attributes after the equal sign):

name=" ... "The name of the point where you want someone to go to.
href=" ... "The name of the "go to" or the URL of the web page to be loaded by the browser.

Additional attributes include: "target", "rel", "rev", "accesskey", "shape", "coords", and "tabindex". You will want to get a reference book if you need to use any of these attributes. JavaScript events include the following attributes: onClick, onMouseOver, onMouseOut, onLoad, etc.

Examples of Jumping

To let the user CLICK to go to another place, abc, within the same web page when the user moves the mouse over the "CLICK HERE ... " and depresses the left mouse button:
<A name="abc">Place at the target location
<A name="abc">Text you want displayed</A>Alternately, if you want to display text here.
<A href="#abc">CLICK HERE TO GO TO abc</A> Place at the jump-from location

To let the user CLICK to go to another WEB PAGE within the same host server folder:
<A href="domainname">CLICK HERE TO GO TO domainame</A>

If the target web page has a name other than INDEX.HTML, add a slash (/) and the file name.
<A href="domainname/sample.html">CLICK HERE TO GO TO domainame/sample.html</A>

If the target is another web page located anywhere on the Internet, use this tag at the jump-from point:
<A href="http://www.domainname">CLICK HERE TO GO TO domainname</A>

If the target is inside another web page, use this tag:
<A href="domainname#abc">CLICK HERE TO GO TO domainname abc</A>

Three Examples of using Anchors to Display a PICTURE

Click on Text, Click on Image, or Click on Either:

<A href="http://www.willowwnds.net/houseforrent.jpg"> Click here to see full screen image</A>

Click here to see full screen image

<A href="http://www.willowwnds.net/houseforrent.jpg">
<IMG ALIGN="center" WIDTH="250" HEIGHT="180"
SRC="http://www.willowwnds.net/houseforrent.jpg"
alt="Very large Picture - will take time to load" longdesc="Photograph of two story house"></A>

(Click on the Image Below)

Very large photograph - will take time to load
(note the border)

<A href="http://www.willowwnds.net/houseforrent.jpg">House for Rent or Sale
<IMG ALIGN="center" WIDTH="200" HEIGHT="144" BORDER="0"
SRC="http://www.willowwnds.com/houseforrent.jpg"
alt="Very large picture - will take time to load" longdesc="House for Rent or Sale"></A>

(Click on Text or Image Below)

House for Rent or Sale

Very large photograph - will take time to load

I have not found a way to make the full screen image center. If the image is displayed in a table you have more control. I believe a smaller image can be centered. An interesting side light on this, if the image is very large, when it is displayed, the browser puts a small magnefying glass on the screen. Moving it to a point of interest and clicking again will zoom in about 3 to 1! In the maximum expanded view, the up, down, left ,right positioning keys can be made to move the image! To exit full screen mode, use the page-return browser button in the upper left hand corner of the window. To see an example of a photo album, click here.

Note that anchor and link names are case sensitive! Try to always use lower case characters.

Image Tag

The image tag (<IMG ... />) allows for the placement of pictures in the web page output. Here is a list of some of it's attirbutes:

src=" ... " The URL of the image.
alt=" . A description of the image seen while waiting for it to load
align=" ... " Left, right or center.
height=" ... " The suggested height in pixels.
width=" ... " The suggested width in pixels (either may be specified).
vspace=" ... "The space of the image between the text above and below it.
hspace=" ... "The space of the image between the text to the left and right.
usemap=" ... "A user side image map for making sections of images clickable.

Example: <IMG src="http://www.willowwnds.net/houseforrent.jpg" align="center" height="180" width="250" alt="Very large photograph - will take time to load" longdesc="Photograph of two story house">

This IMG tag will display the following image. Note that text can be made to flow around this image (To see a web page example of this Click here.

Very large photograph - will take time to load

If the IMAGE tag is placed between the anchor tag and it's ending tag, it can be clicked on to cause it to load the image or another web page. Another web page could itself display an image and annotate it and provide navigation back or to the next or prior image (in a string of images). For example: Go to a WEB PAGE which uses this technique

Input forms, blinking text, moving text, live audio and video output is possible.

WEB PAGE Structure

There are browser structural statements. These identify what level of markup is being used, break the document into "header" information as separate from the "body" of the document. The header describes the document with a title and "meta" web information (search parameters), and may include background and style information.

To Look at Markup in A Web Page

To learn more about the structure and use of markup tags, access any web page using a browser, select the "page" option and choose "view source". Observe the tags as they are used. Most web pages allow this use of their web pages. You can save a copy to your computer if you wish, but be aware that you may be violating someone's copyright depending on what you do with the copied material. Use the symbol &copy; (©) to copyright your work!

It is a good idea to comment what you did so you can get up to speed in a hurry later on when you may have to make some changes. Comments are surrounded by Comment Begin (<!--) and Comment End (-->) tags. These tell the browser to ignore what is between the comment begin and end tags. Note that the browser also ignores blank lines or sequences of more than one blank character, so you can space the information out as much as needed to make it more readable! If you need additional blank space in your output, you can use the symbol &nbsp; to create one blank character in the output, and other controls to indent or change margins, etc. CSS statements use a different comment begin (/*) and end tag (*/), as do JavaScript comments (//)!

The first line in a web page usually tells the browser what level of HTM or HTML you are using. This begins with what looks almost like a comment, typically:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This says the web page follows the HTML public standard, by the W3C committee, and is at the 4.01 level. Further, it includes both old and new HTML tags, and is intended for English speaking users.

Every document must then have a starting tag (i.e. - <HTML>) and must end with an document ending tag (</HTML>). There are a few tags which don't yet require an associated end tag. Most notibly, the line break, which requires a blank-slash ending of it's own: <br />. Following the starting HTM or HTML tag there must be a head section and a body section. Some browsers will display documents which do not completely meet the standards. See the following example of a normal sequence:

<HTML>Beginning of Document
<HEAD>Beginning of Heading Section
<TITLE> ... </TITLE>Title of Document (Browser displays this)
<STYLE type="text/css">
...

</STYLE>
Style Block containing CSS Statements
...
The Heading Section may include style, background -image, -color, or font information.
<META ... >Various "meta" tags (Provides Information for Browsers and Search Engines)
</HEAD>End of Heading Section
<BODY>Beginning of Body Section
...
 
The Document
</BODY>End of Body Section
</HTML>End of Document

These documents may also include JavaScript and forms, which allow the creator to change document parameters "on the fly", or communicate back to programs running on the server to perform feedback from the end user. HTM tags not discussed here include SCRIPT, NOSCRIPT, CODE, KBE, VAR, SAMP, DFN, TT, ADDRESS, BASEFONT, PRE and the less common attributes of tags.

When you begin to explore all the possible variations this can get very complicated. There is a good deal of HTML reference material on the internet if you search for it.

Frames and Forms

Frames allow setting up additional windows for pop-ups or alternate displays, and have not been of any interest to me yet.

Forms are important to establishing a dialogue between your client and your server system. In other words, they provide for feedback. Feedback can let you know that someone looked at your web page and liked it enough to send you a note! Or they wanted to become a member in your "club". Or they want to buy something you have for sale in your "on-line store". Or they want to query some information you keep in an on-line database. Starting with a script you can implement any of these ideas or just turn the note into an e-mail back to yourself!

In any case, the webpage forms are easy to code and test. They use the "form" begin and end tags. In between you use "input" tags to define the individual prompts, give them a variable "name", and an optional "value". The most important input tag has the name "submit" and causes the accumulated feedback variables to be sent to your host server. If you contact me I will be glad to teach you how!

Scripts on your host Server

The fun begins on the server. There you must have a script or program to receive and process the variables just sent from your client's browser by your webpage. There are many script programs to choose from, but the script programming language which seems to be the most common is called PHP. This package must be installed on your host server. Then you up-load the script code you have written to the server the same way you up-load your webpages to the server. It has to be located in the "document-root" file directory. Actually, it can go in any directory your webpage can reference!

In my experience, getting a good book on PHP should be the first step in learning to write a script! I bought two. They both have the same information but present examples differently so you see them from two perspectives! Both books, however, spend three chapters telling you how to turn your personal computer into a mini-server with a PHP script processor, MySQL databases, and an Apache server. However, I said to myself, why waste all the time and disk space doing this when I buy access to an excellent server host provider and I have learned how to up-load files to it efficiently and quickly, and I can test just as well from there!

The greatest difficulty comes in testing your scripts. I have yet to find a way to get PHP to tell me when it encounters a parsing error and dies - except you get a blank screen! However, by putting echo statements and exits near the begining of the script, you can find what snippets of script do work, and moving them down till you find what is failing, you can debug your code! At some point, you can have enough error messages that it is easy to trace what is working. The first time it took three days to debug my first big feedback script! Once you get some working scripts, keep them as templates for future work - it saves time.

I found that an "all-in-one" script which includes both webpage HTML and PHP script code can greatly improve the usefullness of your feedback form. Webpage markup can improve the apparence, and the "all-in-One" script can save the data entered by your client when the script detects a error, saying that there is a missing field, and requests a correction. The client does not have to rekey any of the prior information! And you have one fewer files to keep track of (the HTML which calls the script and the script file). Of course you still have the original webpage, but usually it calls a feedback HTML file which calls the SCRIPT file. The problem with the all-in-one PHP file is that each time the submit button is clicked there is a two way dialogue between the browser in your PC and the host server. If there are a lot of variables to transmit and a number of errors encountered this creates a lot of traffic and client delays. A better solution is to use JavaScript at the browser side to validate and get corrected information before any transmission starts with the host server! JavaScript can do a lot of things to make the dialogue more dynamic and interactive and still save the client from re-entering prior data! You still need a script on the host server. Microsoft's Internet Explorer suspresses the use of JavaScript if the client does not override this option, saying that use of JavaScript endangers you PC. Since you can not depend on the user to allow use of JavaSript, I would not recommend using it for validation. Use PHP on the server instead of JavaScript on the PC.

How This Web Page Was Created

This document was created initially using Corel WordPerfect X3 and was output "to the web" by WordPerfect. The output is an HTM web page file with all of the word processing controls removed and some markup tags inserted. As with most WYSIWYG editors, WordPerfect inserts a lot of unnecessary markup tags, and does not do a perfect job of transmitting formatting information via the tags it inserts. But if you are not a good speller or make keying errors, there is an advantage to starting with a word processing program. After converting a document to HTM, make further changes using NOTEPAD or any other text editor. Split the document into separate web pages so you don't have to go through converting prior work more than once!

Specifically, WordPerfect replaces paragraph starts with a double set of break tags, which has the effect of starting a paragraph, followed by and an actual <P> tag. This creates two blank lines between each paragraph! It should either insert the double set of break tags OR the paragraph tag, not both. Your text editor can easily remove the unnecessary double break tags in one FIND and REPLACE operation. The extra SPAN, STYLE and FONT tags inserted into the paragraph tag can be left as generated. However, it should be noted that ONE body style HTM or CSS statement inserted at the beginning of the document in the HEAD section could replace ALL of the identical SPAN, STYLE, and FONT tags inserted in each and every PARAGRAPH tag!

WordPerfect also changes superscript "th", "nd" and "rd" into the sequence <sup>th</sup>, etc. but does not reduce the size of the "th" so the current text line is depressed by 25% from the prior line. It does not look good if one line has more white space above it! To correct this, insert a style statement to reduce the font-size associated with the sup tag to 75%.

Additionally, the font size used in WordPerfect headings turn out smaller in the HTM web page. Just change the font size in the associated style parameters.

Note: WordPerfect takes "preformatted" text and inserts paragraph tags in front of each line creating extra spaces between these lines. These can also be fixed by the text editor after the HTM copy is created.

Sample Web Page

Here we take the structure tags displayed above and add some additional tags to demonstrate some of the possible formatting which could be added. In the HEAD section, a LINK tag can be used to bring an external CSS file into the document to change the default HTM format into a style more suited to your taste! Using an external CSS file lets you set a standard for all of your web pages and not have to key each of the individual CSS tags into each document. Yet these or additional style sheet tags could also be included within each document.

CSS statements differ from normal HTM tags in that the names (or list of names) of the HTM tags being modified are followed by the modifying information enclosed in curly braces { and }. The HTM comment tags <!-- and --> are ignored by CSS, and CSS comment tags /* and */ are recognized. Also, the syntax of the CSS statements differ from the HTM parameters for similar functions! The HTM comment tags may be placed within style sheet controls to hide them from older browsers which do not recognize CSS controls. CSS ignores these HTM comment tags.

In this example we are trying to create a restaurant menu. We would like to highlight a menu item in large type and color followed by an inline description of this food item. In SGML there are such inline heading tags. But HTML heading tags cause a line break and blank line after the heading. So instead of using a heading tag for the item name we modified the BOLD (b) tag to increase font size of the item name by 58% and color it blue! Since BOLD is an inline tag, we get no line break or added blank line. We can still use the strong (STRONG) tag to make other text darker. However, we could have done the same thing using the STRONG tag instead of the BOLD tag, since both BOLD and STRONG would normally have the same result. The BOLD tag modified by CSS is shown here. It shows how this CSS modification would be made bolder (font weights of 100 to 700 can be specified, with 300 being normal) and the character spacing (or word spacing) could be reduced! Also, a text block or boxes can be offset by CSS margin (top, left, bottom, or right) statements and by padding (on all sides).

Then we have some META tags. This information is not displayed with the web page but instead passes search information to the browser to aid in helping Internet users locate web pages of interest. I suggest you look at the META tags found in web pages you access online (see how above).

Next we have the BODY section. Here the BODY tag has some native HTM parameters applied to all of the text in the BODY section. These can all be specified in internal or external style sheets instead of being in the BODY tag. And at the end of the document there are the "end of body" and "end of document" tags!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE>Sample Restaurant Menu</TITLE>Document Title
<link rel="stylesheet" href="restaurant.css" type="text/css"> Link to External CSS
<style type="text/css">Internal CSS Start
body {font-size:16pt;}Font for Body Section
table {font-size:16pt;font-weight:bold;}Font Size and Boldness for Tables
b {font-size:1.58em;font-weight:500;color:blue;width:92%;
            border:none;font-style:normal;}
Font Size, boldness, Color, Character Spacing, etc. for the Bold Tag
</style>Internal CSS End
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;">
<META NAME="Description" CONTENT="Your Restaurant's Name">
<META NAME="Keywords" CONTENT="Woodstock, Ulster County,
            New York State">
<META NAME="robots" CONTENT="index/follow">
<META NAME="revisit-after" CONTENT="10 days">
Passing Information to Browser
</HEAD>Heading Section End
<BODY style="background-color:#fbedcf;background-position:_bottom;
            background-attachment:fixed;">
Body Section Style
<h1>A Major Document Heading</h1>
<p>A paragraph begins here.</p>
  ...   The Document
</BODY>Body Section End
</HTML>Document End

If you would like to look at a Sample Restaurant Menu which uses a lot of CSS, click here: (wwe.willowwnds.com)
This is a sub-domain web page that is a Sample Restaurant Menu. The problem with this application comes up when you want to order takeouts. First, you have to add a form for checking off what you want to order - easy. Then the host server must have a program to process that form when it is sent back. Finally, if the restaurant does not have a computer at the location of the restaurant, some kind of FAX output would have to be used to get the order back to the restaurant. Note, not every location has a high speed computer access line at this time so E-mails would be slow.

How to Present a Picture Album

I wanted to display some 25 thumb print size pictures on a web page and made it possible to click on any one and see an enlarged version of it. My photographic processing program provided an option for doing this. It prepaired 25 thumb print image files of the pictures and a master HTML file for displaying them and linking to 25 HTML files for displaying each of the large originals, with navigation for going serially through them or returning to the master file.

This took some effort to make it work, but it did! Then I conceived a plan for doing this in just two HTML files! That worked also, and took more space but 25 fewer files. It does everything the previous version did plus allows scrolling through them (in addition to clicking). Sometimes, on the first click it does not land on the proper boundary. If you would like to see the latest copy of this, click here.

Now I am working on doing the same thing with one HTML file and no thumb print files! I am sure this will work too. This will save an additional 25 thumb print files! But it may take longer to load. My wife collected pictures of moviestars when she was a teen-ager. I have put 50 of these into a webpage which takes a long time to load (don't try it on a dial-up connection). Click here to see Stars who were my wife's Idols!

I need to add something about how to get a server. Go on the internet and search for server. Check out a number of them for price, capability, and support. They will charge from $4.50 to $15.00 per domain name per year, plus from $4.95 per month to about $80.00 per year depending on what you select. The first server I selected charges $60.00 per year and includes a rich level of capability. This company is accessed at 50WEBS.COM and is very reliable. I had to use the MOZELA Firefox browser to get around a problem with Microsoft's Internet Explorer! The last time I checked, 50WEBS.COM provides one free domain name, support for five more, and PHP, MySQL, and Apache Servers (two presently in the US). If you are not supporting a commercial application, they will give you free webpage support with more limited capability.

Return to TOP