Introduction to HTML

This is a reference guide, covering the topics of HTML, business on the web, and web security. The information within this guide is derived from the sources listed within the Bibliography Section. For an excellent and thorough online tutorial of HTML design, I encourage you to try the HTML Primer at http://htmlgoodies.earthweb.com/primers/primer_1.html.

Screenshot of my site

Chapter 1: Introduction to HTML

Hypertext Markup Language, or HTML is the key markup language for the World Wide Web. Just about every web page that is viewed is based on the application of HTML. It's a simple, universal markup language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. An HTML document consists entirely of raw, unformatted text, which is then translated and converted to a viewable page by the user’s web browser. Therefore, HTML is the most mobile and supported document type available. HTML, or Hypertext Markup Language gets its name from what HTML authors do the text to produce an HTML document, as well as how a browser reads a document. The word “Hyper” is the opposite of linear, which refers to the user’s ability to view any area of the page at any time, rather than being forced to browse a website in a linear fashion. The word “text” means that the source code is made up of pure, English text; and the term “Markup” implies that the text is marked up with source tags to tell the browser to display the text a certain way.

HTML requires no knowledge of programming to use, and in its basic form the elements of HTML are incredibly easy to learn and understand, and even a beginner computer user can quickly design and implement his or her own website. Also, unlike most computer programming languages, HTML requires no special software to edit and/or compile its source code. Furthermore, writing HTML requires no programming experience, so anyone who understands the basic elements of HTML can generate a web page with just a simple word processor program.

Later, in this book we will discuss conducting business on the web, web security, and network security. While these are not directly related to HTML, the markup language has strong application within these subject areas. Below is a diagram of how programs utilize source code in computer programming, which still as application to web design.

Chapter 2: HTML Basics

Introduction to HTML Source Tags

The text in an HTML document is marked-up with tags which tell the viewer’s web browser how to view website. A simple example of an HTML tag, is <TAG> (note: throughout this book, all HTML tags will be printed in green and will be capitalized, however tags are not case sensitive), most HTML tags come in pairs, the opening tag and the closing tag which is preceded by a forward slash (‘/’), so the closing tag for the example tag above would look like this: </TAG>. Tags are essential to defining how the section of text or referenced objects enclosed between them will be displayed on the browser window. Throughout the remainder of this section we will briefly discuss the various basic tags that can be used in HTML.

<HTML></HTML>

This pair of tags is the most important in HTML, because it opens the document and lets the browser know that everything within the pair of tags should be interpreted as HTML. The opening tag should be placed at the very beginning of the document, and the closing tag should be placed at the very end of the document.

<HEAD></HEAD>

This creates a header to the web document, which is not displayed directly on the web page itself. Objects that can be placed within these tags include the page’s title, any Meta tags (which will be discussed in the chapter on advanced HTML), and anything else which will not visible on the page. The chapter on advanced HTML will discuss more advanced objects that can be placed within the header tags.

<BODY></BODY>

This element tells the browser that everything contained within these tags should be visible on the page when viewed. This set of tags basically encloses the main body of the web document.

Header Section

The next group of tags are usually placed within the <HEAD></HEAD>, tags, which is known as the head section of the document.

<TITLE></TITLE>

This is a required part of every HTML document, which identifies or summarizes the content found within the page. Text contained within title tags will displayed at the top of the browser window, and is not physically on the page itself. A suggested size limit for titles is 256 characters.

<SCRIPT></SCRIPT>

This set of tags is used to denote that a scripting language has been placed within the pair of tags. Script tags can also be placed within the body section of the document. Scripting (both embedded and external to the page) allows web pages to perform actions and change dynamically in response to events such as screen exit and entry, or user mouse-clicks. Scripting languages will be discussed in more detail in a later chapter.

<STYLE></STYLE>

The style tags are used in the document’s head section to indicate style information for the entire document. Style information includes how text appears on the page, font styles, text alignment, etc. This set of tags is for style information that is included directly in the page’s source code. To link the page to a separate document containing the style information, requires a more advanced tag and will be discussed in the advanced section.

<META … >

The Meta tag is a useful tool, for identifying important information about the web document. The information used in these tags is not displayed on the page itself, but is within its source code. Meta tags, their attributes, and what the information they contain is for, will be discussed in the advanced section.

<LINK … >

The link element is a special element in the head section, which indicates a relationship between the current document and some other object. A document may have any number of link tags, which can indicate authorship, related indices and glossaries, older, or more recent versions, document hierarchy, associated resources such as style sheets, etc. Servers may also allow links to be added to a document by those who do not have the right to alter the body portion of a document. The popular browsers are just beginning to support this element, which has been in the HTML specifications for some time. Using link tags will be discussed in the advanced section.

Body Section

The next group of tags are placed and used within the <BODY></BODY>, tags, which is known as the body of the document. This section will only discuss basic tags, and is categorized by type of tag.

<HR></HR>

This is a horizontal rule tag, which provides a visual division between sections of text. The default value in most multimedia capable browsers is a 3 dimensional transparent line running horizontally across the entire screen.

Anchors

An anchor is a set of tags which either denote a text, image, or object which is to be linked to another document; or a location within a document where a bookmark should be placed.

<A HREF=“…”></A>

This set of tags is used to link whatever is between the tags, whether it be text, an image, or some other object to another web document, image, or a bookmark. Information on the necessary attributes for this tag can be found in the advanced section.

<A NAME=“…”></A>

This set of tags is used to define a bookmark location, the actual location of the bookmark will be directly on whatever text or objects are contained in between the tags. The Bookmark element defines a portion of text and/or an object that serves as a destination for an URL activation.

Block Formatting

Block Formatting in HTML provides the means to render content in sections that are distinct both physically and often visually from other surrounding sections and content. Browsers should render Block Formatted sections with line break before and after the content block in addition to any other styles applied.

<BLOCKQUOTE></BLOCKQUOTE>

The blockquote tags are used to indicate content quoted from another source. This block element should be used ideally only when the quotation is longer and will likely span several lines. Text within the tags is usually rendered with a left indent and possibly an equal right indent as well.

<CENTER></CENTER>

Center is an element that centers the text it contains in the browser window. The element was created to fill the need for authors to have some text alignment controls, but most of the effects this element produces have been absorbed by other block formatting elements such as the <ALIGN> tag (which extends control to right alignment and justification as well).

The pair of tags above is used to denote the six heading levels (H1-H6), which indicate section headings. Heading 1 (<H1>) is rendered as the largest and most important section heading while Heading 6 (<H6>) is rendered as the smallest, least important heading.

<MARQUEE></MARQUEE>

Creates a marquee, which is a rectangular banner of scrolling text allowing many different movement behaviors. All text contained within the tags will be part of the marquee and will be scrolling text. Marquee attributes will be discussed in detail within the advanced HTML tag section.

<MULTICOL></MULTICOL>

The multicol tag specifies that all contained text will be displayed in multi-column format. All columns will have the same width and data should be spread evenly across each of the columns to achieve roughly equal column heights.

<P></P>

This element is known as a paragraph tag which defines a paragraph. The exact indentation, leading space, etc. of a paragraph is not specified and may be a function of other tags, style sheets, etc. Paragraphs are typically surrounded by a vertical space of one line or a half line. Additionally, the first line in the paragraph may be indented in some cases, according to browser settings. Also, the closing paragraph tag is optional.

<PRE></PRE>

These tags are used to indicate pre-formatted text, or text that has been formatted for the screen and is rendered using a fixed-width font. All whitespace characters are interpreted literally and retained in display (including multiple spaces, tabs, carriage returns and linefeeds.) Normally, parsing behavior in HTML collapses multiple spaces, tabs, CRs, or linefeeds to a single space.

Character Formatting

Character Formatting which allows the author in-line control over changes to content, whereas the other basic formatting mode, Block Formatting, defines content into vertically distinct sections from surrounding text. A visual browser will usually render Character Formatting changes in place while Block Formatting will render any applicable formatting plus an additional implied line break before and after the content block.

<B></B>

Text contained within these tags will have a bold font face.

<BIG></BIG>

Text contained within this set of tags will have a larger font size in relation to the browser’s default font size.

<BLINK></BLINK>

This is causes its contained text to repeatedly blink on and off on the screen. Netscape created the element and is currently the only major browser to support it.

<CITE></CITE>

This virtual style element indicates text that is used as a citation. It is usually rendered as italic text.

<CODE></CODE>

This virtual style element indicates text that is a sample of computer code. It is usually rendered with a fixed-width font.

<EM></EM>

This virtual character formatting element indicates text that should be emphasized. It is usually rendered as italic text.

<FONT></FONT>

This Physical Style element is the most versatile of all the character formatting elements and is also the only one of this type to accept its own attributes. Text within these tags will be displayed according to font specifications within the tags attribute section, which will be discussed later in the advanced section.

<I></I>

Text contained within this set of tags will be italicized.

<KBD></KBD>

This virtual character-formatting element indicates text entered from the keyboard, usually by displaying in a Teletype font face.

<Q></Q>

This is a nestable, character formatting featured introduced to denote short quotations. Its use is recommended for quotations not requiring line breaks. The contents of the <Q> tags should not include the quotation marks, as they should be added by the browser when displayed.

<SMALL></SMALL>

This element applies a smaller size font formatting to text in relation to the default font size.

<STRIKE></STRIKE>

This set of tags applies a strikethrough font face to the contained text, which is a horizontal line through the approximate vertical midpoint. (example: ~~strikethrough~~) This set of tags can be abbreviated by simply using <S></S>.

<STRONG></STRONG>

This virtual style element indicates text that should have strong emphasis. It is usually rendered as bold text.

<SUB></SUB>

This is the subscript tag, which makes contained text subscripted in relation to surrounding content (vertically lowered text).

<SUP></SUP>

This is the superscript tag, which makes contained text superscripted in relation to surrounding content (vertically raised text).

<TT></TT>

This set of teletype tags causes the contained text to be displayed in typewriter-like font face.

Line Breaking

This group of tags allows the page author to override a browser’s default line breaking.

<BR>

This line break tag indicates that a line break be placed in a section of content. This overrides the typical HTML behavior which lets the browser decide when to put line breaks in a document. The same indentation level applied to the previous line will be applied to the new line of content. Note: there is no closing tag for this item.

<NOBR></NOBR>

This non-breaking line tag indicates to the browser that all contents within its boundaries will not have line breaks inserted. This behavior overrides the default line-wrapping mechanism that is default to HTML and can yield odd visual results for large amounts of text. Unlike the line break element, this feature does require a closing tag to indicate where the browser may take over control of line breaks.

<WBR>

This word break tag is a stand-alone element which indicates to the browser where a particular word is ALLOWED to be broken. This does not necessarily mean that the word WILL be broken at this point - it is just a guide for the browser. Within the context of the non-breaking line feature, the <WBR> EXPLICITLY tells the browser where to put the word/line break. This tag also does not contain a closing tag.

Creating Your First Web Page

To give you a much better understanding of the concepts of HTML, this section will discuss developing a basic webpage without the help of any web design software. All web document creation will done through the use of any simple word processing program, Notepad is recommended for MS Windows^© and Simple Text is recommended for MacOS^© users. When you have completed your writing webpage in your word processor program, you can view the page in a browser, like Netscape^© Navigator or Microsoft^© Internet Explorer. The browser will interpret the HTML tags that you have written and will display your web page.

Before you beginning writing you page with a word processing program, there are is some important information about saving your document which you must know. After you have written the source code for the page, you must not save the document normally, but choose SAVE AS which is just below SAVE. Then when prompted, select to view ALL FILES rather than TEXT FILES (.TXT), and type in .htm after the filename you give it to save it as a web document.

Now, that the basic issues have been resolved, we can begin designing a basic web page. We will utilize some of the basic HTML tags described in the section above. Here is a sample tidbit of source code, alongside a screenshot of how it will appear on a browser window.

<HEAD>

<TITLE> My first web page </TITLE>

</HEAD>

<BODY>

<CENTER> <B> This is my first web page! </B>

<P> I can write in <I> Italic </I> or <B> Bold </B> <BR>

<HR>

<B> <I> Or both </B> </I> <BR>

<HR>

<TT> <U> This is the end of my first page </U> </TT> </CENTER>

</BODY>

</HTML>

<HTML>

As you can see, it is very simple to implement the HTML tags that we have discussed to create a functional web page. So now its time to move on to the chapter on Advanced HTML, to learn more advanced uses of HTML tags to add a little oomph to your page.

Chapter 3: Advanced HTML

Now that we have covered the basics and you now have a fundamental understanding of the basic techniques and tags in HTML, we can examine the more advanced, built-in features and tags of HTML. In this chapter we will start of with an overview of the advanced tags, which can be used in a web document.

Advanced HTML Source Tags

In this section, we will briefly discuss most of the advanced tags in HTML, as well as introduce the concept of tag attributes. We will also take another look at some of the basic tags from Chapter 2, and modify them by adding tag attributes.

Tag attributes are basically additional information included within the opening tag of an HTML element. This additional information allows the page’s author more control over how a page can be viewed. A simple example of a tag attribute is including font size information within a font tag, which should be written as: <FONT SIZE = “+4”></FONT>.

The HTML tags in this section will mostly be written in an annotated syntax form, which will show allowable attribute locations. After a description of the tag itself, unless the tag was already described in the basic section, there will be a list and description of most of the common attributes for that tag.

<!DOCTYPE [Top Element] [Availability]

“[Registration]//[Organization]//[Type] [Label]//[Language]”>

The DOCTYPE declaration is a top-level tag-like reference known as a Public Text Identifier. It should appear at the very beginning of an HTML document in order to identify the content of the document as conforming (theoretically) to a particular HTML DTD specification. Almost all-popular browsers allow the omission of this declaration. The quoted segment within a DOCTYPE declaration is called a Formal Public Identifier (FPI). Every distinct DTD variation will have its own unique FPI string.

Required Attributes:

[Top Element] - Indicates the top-level element type declared in the DTD; for HTML the attribute should be written as HTML.

[Availability] - Attribute indicates whether the page is a publicly accessible object (PUBLIC) or a system resource (SYSTEM) such as a local file.

[Registration] – This attribute is indicated by either a plus ("+") or minus ("-"). A plus symbol indicates that the organization name that follows is ISO-registered. A minus sign indicates the organization name is not registered. The IETF and W3C are not registered ISO organizations and thus use a "-".

[Organization] - This is the "Owner ID" - a unique label indicating the name of the person or organization responsible for the creation and/or maintenance of the identified site. The IETF and W3C are the two originating organizations of the official HTML DTDs.

[Type] - This is the “Public Text Class,” which is the type of object being referenced. There are many different keywords possible here, but in the case of an HTML document, it is “DTD” - a Document Type Definition.

[Label] - This is the “Public Text Description,” a unique descriptive name for the public text being referenced. If the public text changes for any reason, a new Public Text Description should be created for it.

[Language] - This is the “Public Text Language”; the natural language encoding system used in the creation of the referenced object, to indicate English, use (“EN”).

Example: <!DOCTYPE HTML PUBLIC “-//IETF//DTD/HTML/EN”>

<HTML [attributes are allowed]></HTML>

Allowable Attributes:

SDAFORM=“”

This is an SGML Document Access (SDA) attribute. SDA attributes are designed to transform HTML to the ICADD DTD, which is used in creating accessible documents for users with visual disabilities (rendering in Braille, large print, speech synthesis, etc.) The attribute value specifies the name of the element to convert this document to in the SDA element group. The value, “Book” indicates to convert to the highest level element for document.

Note: there are a few more attributes which are allowed within the HTML tag, but they are highly complicated and are really not necessary, so it is not practical to discuss them.

Header Section

The next group of tags are usually placed within the <HEAD></HEAD>, tags, which is known as the head section of the document.

<LINK [inclusion of attributes is required]>

Allowable Attributes:

HREF=“[location of an object]”

This attribute indicates the URL of a document linked to the current document through relationships established by the other attributes of this tag.

LANGUAGE=“”

This attribute indicates the scripting language the linked element is written in.

NAME=“”

This attribute specifies the name of the link so that scripting languages may access it.

REL=“”

This relationship attribute is meant to give the relationships described between the current document and the document specified by the HREF attribute.

TARGET=“[name of frame]”

This attribute specifies the named frame for the browser to display the linked resource if activated by the system or user.

<META [inclusion of attributes is required]>

Allowable Attributes (Most Common):

CONTENT=“[string]”

This attribute indicates the string value for the specified attribute of HTTP-Equiv or NAME.

HTTP-Equiv=“”

This attribute binds the CONTENT attribute value to an HTTP header field. When a browser views a particular page containing a META HTTP-Equiv element, the CONTENT portion of the element will be attached to the document header that is passed to the browser before the rest of the actual document content. The browser or HTTP server may use this information to process the document.

NAME=“”

This attribute indicates what type of information will be included as part of the CONTENT attribute.

Body Section

The next group of tags are placed and used within the <BODY></BODY>, tags, which is known as the body of the document.

<IMG [inclusion of attributes is required]>

This tag is the main element used to insert graphics into a web page. The closing tag is always omitted.

Allowable Attributes:

Align=“”

This attribute specifies the alignment of text relative to the image on screen. LEFT and RIGHT specify floating horizontal alignment of the image in the browser window, and subsequent text will wrap around the image. The other options specify vertical alignment of text relative to the image on the same line. Possible Values: Left | Right | Top | Texttop | Middle | Bottom

Alt=“”

This is text to be displayed in place of an image for browsers that can not handle this ability or for browsers that have disabled this ability. This attribute is not required, but highly recommended.

Border=“”

This controls the thickness of the border around the image (in pixels) whether as a hyperlink or as a stand-alone image. If the image is stand-alone, the border color will usually be the color of the surrounding text (affected also by the TEXT attribute to the BODY element.) If the image is within a hyperlink the border color will the default hyperlink color (affected also by the LINK attributes to the BODY element.)

Values: 0, for no border, or a positive integer pixel value.

Height=“”

This attribute explicitly specifies the height of the graphic in pixels. It is mainly used to create custom image dimensions without physically changing the image itself. It can also be used to speed up display of the document being downloaded so it can pre-render the document with image placeholders while the images download.

Src=“”

This attribute specifies the location, whether it be absolute or relative, of the image. This attribute is required.

Width=“”

This attribute explicitly specifies the width of the graphic in pixels. It is mainly used to create custom image dimensions without having to physically change the image itself. It can also be used to speed up display of the document being downloaded so it can pre-render the document with image placeholders while the images download.

Anchors

<A [inclusion of attributes is required]></A>

Allowable Attributes (most common):

HREF=“[hyperlink address]”

This attribute indicates the URL to be loaded when the hyperlinked object is activated. Either this attribute or the NAME attribute MUST be present in the Anchor tag.

NAME=“[string]”

This attribute assigns a symbolic name to the enclosed object (text, image, etc.) in order to use it as a destination in a hyperlink or other URL call. Either this attribute or the HREF attribute MUST be present in the Anchor tag.

<MARQUEE [inclusion of attributes is required]></MARQUEE>

Allowable Attributes:

BEHAVIOR=“”

Specifies how the Marquee text should move. Possible values: scroll (Text enters on one side of the screen and travels to the opposite side and cycles repeatedly from where it started); slide (marquee enters from one side of the screen and comes to stop at the opposite side); alternate (marquee bounces from one side of the screen to the other).

BGCOLOR=“#------”

Specifies a background color for the Marquee box, color should be in hexadecimal format.

DIRECTION=“”

Specifies the direction the Marquee text should scroll (left [DEFAULT]; right; down; up).

HEIGHT=“”

This attribute specifies the height of the Marquee box. Default value is the height of the contained text.

LOOP[=“”]

Specifies how many times the Marquee display will cycle, if no positive integer is included then the Marquee will loop infinitely by default

SCROLLDELAY=“”

This attribute specifies the number of milliseconds between each successive draw of Marquee text.

WIDTH=“”

This attribute specifies the width of the Marquee box. Default value is the width of the screen.

<P [attributes are allowed]></P>

Most Common Attribute:

ALIGN=“”

This attribute indicates the alignment of the Paragraph text in the browser window. Possible Values: left [DEFAULT], right, center, justify

Character Formatting

<FONT [inclusion of attributes is required]></FONT>

Allowable Attributes:

COLOR=“”

Specifies the color of the enclosed text, color should be hexadecimal format.

FACE=“”

This attribute indicates a specific font typeface to be used instead of the default typeface used in the browser. If the system that is viewing the document does not have the font typeface specified by this attribute then the browser default is used. To ease portability, multiple typefaces can be specified in the attribute value separated by commas. It will check for availability starting from the style name on the left, working its way right.

FONT-WEIGHT=“”

This attribute controls the boldness characteristics of text content in a nine level boldness scale (100-900) with '400' being the standard default. Values can also be expressed as relative changes (+/-) of the current font boldness.

POINT-SIZE=“”

This attribute indicates exact point value of font size.

SIZE=

This controls the size of the contained font, in relation to the browser's default font size.

Embedded Functionality

<EMBED [inclusion of attributes is required]>

This tag is used to embed an object into a page, whether it is video, a plug-in, an audio file, etc.

Allowable Attributes:

ALIGN=“”

This attribute specifies the alignment of text following the embedded object relative to the object on the screen. Values of LEFT and RIGHT specify floating horizontal alignment of the embedded object in the browser window, and subsequent text will wrap around the object. The other values specify vertical alignment of text relative to the object on the same line.

DISABLED=“”

This attribute specifies whether or not the embedded object responds to user interaction. Usually also signified by a visual "dimming" of the object. Possible Values: TRUE | False [DEFAULT]

HEIGHT=“”

This attribute specifies the height of the embedded object on the screen.

HIDDEN=“”

This attribute specifies whether the embedded object will be visible on the page. A value of TRUE will override any HEIGHT/WIDTH attributes also set and the rest of the page will be rendered as if the embedded object does not exist in the document flow.

NAME=“”

This attribute is used to give a unique label to this embedded object so that it can be referenced and manipulated with scripting code.

PLUGINURL=“”

This attribute takes of the URL of a Java Archive file for use in directly installing a plug-in if it is not already installed.

SRC=“[web location]”

This required attributed indicates the source URL of the embedded object.

Values: Either an absolute or relative URL. All URLs should be URL encoded where required.

WIDTH=“”

Specifies the width of the embedded object on the screen.

Forms

Forms are the primary method (and also the oldest) for making a web document interactive. Forms allow the input of information by a reader. Various input methods exist to enter this information from the user such as buttons, pull-down menus and text boxes. When a user is finished entering information in an HTML form, they can "submit" this information. Submitting form information can result in the creation of dynamic web pages, the sending of e-mail, or other actions - it is all determined by the intent of the program that is activated to analyze the form information.

<BUTTON [attribute inclusion is required]></BUTTON>

This button feature allows for the creation of richer form control widgets than the standard plain text fields available through the <INPUT> tag. The button element can contain most any non-interactive element such as character and block-level formatting.

Allowable Attributes:

Disabled=“”

This is a stand-alone attribute, which indicates the element is initially non-functional. Disabled form elements should not be submitted to the form processing script.

Name=“”

This attribute associates a symbolic name to the field when submitted to a form processing script.

Type=“”

This attribute specifies the purpose that the button will fulfill: that of the traditional submit, reset or multi-purpose button.

Values: submit | reset | button

Value=“”

This attribute represents the symbolic result of the button when activated.

<FORM [attribute inclusion is required]></FORM>

The form element is used to contain information on how to process the information collected in the form. There can be more than one form in a HTML document but the form element cannot be nested. An explanation of how to process the submitted data is beyond the scope of this document, please refer to the Forms Overview page for sites that deal with this subject in greater detail. The implementation of form attributes is a complicated matter, and beyond the subject matter of this book, so it will not be discussed. It is recommended that a web-authoring program be used when designing forms.

Lists

Note: For the list tags, none require inclusion of tag attributes, however they are allowed. Allowable tag attributes for list items are identical to those allowed for paragraph tags.

<OL></OL>

This is the ordered list tag, which represents a list of items sorted by sequence or order of importance. The browser usually displays a numbered list of items.

<UL></UL>

This is the unordered list tag, which represents a list of items in which order is not necessarily important. The browser usually shows a bulleted list, and many browsers may change the appearance of the bullet when the list is nested in another list.

<LI></LI>

This is list item tag, which is only used as a sub-element of a list type, whether it is an ordered list or an unordered list. It is used to signify the next element in the designated list. The closing tag is optional, because it is implied at the next opening tag.

Tables

Tables are a fantastic way to organize and display a lot of information on a web document; it is redundant to discuss developing tables with HTML tags when it is much easier and more efficient to develop them with any basic web design program.

Chapter 4: Sprucing Up Your Page

In this section we will apply some of the advanced HTML tags discussed below, as well as, utilize tag attributes to manipulate fonts, add links, and even images.

Perhaps you would like a little more control over the way the text appears on your page. The <FONT> tag gives you tremendous control over how your text can appear. Also, to spruce up your page your might want to add an image to page, perhaps a little eye candy for the viewers. This can be accomplished using the <IMG> tag. Furthermore, as you develop more pages you will probably want to link them together, or you might want to link to someone else’s page, or you might want to include an e-mail link. This can all be accomplished using the HREF attribute of the <A> anchor tag. Because we discussed in much detail the usage of most of the needed HTML tags to produce a functional web page, there is really no need to go over that information again, so I will just show you a sample source code with the above tags being used, attributes being manipulated, and a screenshot.

The next chapter discusses how maintaining a website can lead to conducting business over the internet. (Below is a beta of my site).

Tables

Table Elements
Element	Description
`<TABLE>` ... `</TABLE>`	defines a table in HTML. If the `BORDER` attribute is present, your browser displays the table with a border.
`<CAPTION>` ... `</CAPTION>`	defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute `ALIGN=BOTTOM` can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption.
`<TR>` ... `</TR>`	specifies a table row within a table. You may define default attributes for the entire row: `ALIGN` (`LEFT`, `CENTER`, `RIGHT`) and/or `VALIGN` (`TOP`, `MIDDLE`, `BOTTOM`). See Table Attributes at the end of this table for more information.
`<TH>` ... `</TH>`	defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
`<TD>` ... `</TD>`	defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Table Attributes
NOTE: Attributes defined within `<TH>` ... `</TH>` or `<TD>` ... `</TD>` cells override the default alignment set in a `<TR>` ... `</TR>`.
Attribute	Description
`ALIGN (LEFT, CENTER, RIGHT)`	Horizontal alignment of a cell.
`VALIGN (TOP, MIDDLE, BOTTOM)`	Vertical alignment of a cell.
`COLSPAN=`n	The number (n) of columns a cell spans.
`ROWSPAN=`n	The number (n) of rows a cell spans.
`NOWRAP`	Turn off word wrapping within a cell.

Sample Table Source Code:

<TABLE>

<TR>

<TH> first header cell contents </TH>

<TH> last header cell contents </TH>

</TR>

<TR>

<TD> first row, first cell contents </TD>

<TD> first row, last cell contents </TD>

</TR>

<TR>

<TD> last row, first cell contents </TD>

<TD> last row, last cell contents </TD>

</TR>

</TABLE>

Screenshot

Chapter 5: Doing Business on the Web: E-Commerce

E-Commerce (Electronic Commerce) is basically any type of business that uses the internet to share and transfer of information. The can include just about any type of business, from “consumer-based retail sites like Amazon.com, through auction and music sites like eBay or MP3.com, to business exchanges trading goods or services between corporations.” E-Commerce has grown tremendously over the past five years and its growth shows no sign of topping off. It is likely that in the future the boundaries between “conventional” and “electronic” commerce will become increasingly blurred as more and more businesses move parts of their operation onto the Internet.

Business-to-Business E-Commerce refers to electronic information exchange conducted between businesses rather between a business and a consumer. Businesses can often deal with hundreds or thousands of other businesses, either as customers or suppliers. Carrying out their business electronically is faster, cheaper and more convenient than traditional methods.

Electronic information exchange has been around for a while in the form of Electronic Data Interchange (EDI). However, EDI generally requires each supplier and customer to set up a dedicated data link between them, while E-Commerce uses the Internet, which provides an easy and cheap method for companies to set up multiple connections with each other. E-Commerce has also led to the development of electronic marketplaces where suppliers and potential customers are brought together.

The following list summarizes the many advantages of e-commerce over traditional methods:

Lower transaction costs - if an e-commerce site is implemented well, the web can significantly lower both order-taking costs up front and customer service costs after the sale by automating processes.
Larger purchases per transaction - Amazon offers a feature that no normal store offers. When you read the description of a book, you also can see "what other people who ordered this book also purchased". That is, you can see the related books that people are actually buying. Because of features like these it is common for people to buy more books that they might buy at a normal bookstore.
Integration into the business cycle - A Web site that is well-integrated into the business cycle can offer customers more information than previously available. For example, if Dell tracks each computer through the manufacturing and shipping process, customers can see exactly where their order is at any time. This is what FedEx did when they introduced on-line package tracking - FedEx made far more information available to the customer.
People can shop in different ways. Traditional mail order companies introduced the concept of shopping from home in your pajamas, and e-commerce offers this same luxury. New features that web sites offer include:

The ability to build an order over several days
The ability to configure products and see actual prices
The ability to easily build complicated custom orders
The ability to compare prices between multiple vendors easily
The ability to search large catalogs easily

Larger catalogs - A company can build a catalog on the web that would never fit in an ordinary mailbox. For example, Amazon sells 3,000,000 books. Imagine trying to fit all of the information available in Amazon's database into a paper catalog!
Improved customer interactions - With automated tools it is possible to interact with a customer in richer ways at virtually no cost. For example, the customer might get an email when the order is confirmed, when the order is shipped and after the order arrives. A happy customer is more likely to purchase something else from the company.

It is these sorts of advantages that create the buzz that surrounds e-commerce right now.

There is one final point for e-commerce that needs to be made. E-commerce allows people to create completely new business models. In a mail order company there is a high cost to printing and mailing catalogs that often end up in the trash. There is also a high cost in staffing the order-taking department that answers the phone. In e-commerce both the catalog distribution cost and the order taking cost fall toward zero. That means that it may be possible to offer products at a lower price, or to offer products that could not be offered before because of the change in cost dynamics.

However, it is important to point out that the impact of e-commerce only goes so far. Mail order sales channels offer many of these same advantages, but that does not stop your town from having a mall. The mall has social and entertainment aspects that attract people, and at the mall you can touch the product and take delivery instantly. E-commerce cannot offer any of these features. The mall is not going to go away anytime soon...

Chapter 6: Web Security

This chapter discusses existing problems in current web security, and solutions to these problems utilizing an HTML related scripting language, known as XML.

Apparently, since the dawn of the implementation of web services, there have been many questions pertaining to its security. However, early designs of “web services” did very little to address security issues. The main focus of web services was to provide a way for programs to communicate with each other over the Internet. Most features of web services use XML to “define protocols, data formats, and so on,” which is a language for “defining structured data,” so that programs can exchange information for easily with each other. Web services build on XML by using the Simple Object Access Protocol (SOAP), which “provides a standard mechanism for remote procedure calls.” However, SOAP does little to address the security issues of web services, and in fact was designed to be able to penetrate firewalls, by “piggyback[ing]” itself on the Hypertext Transfer Protocol (HTTP). HTTP is “the fundamental protocol for Web browsers and servers,” and most organizations usually allow HTTP through their firewalls. In fact, allowing SOAP messages through a firewall creates more security problems, because the protocol is “intended to invoke remote actions, which may have a malicious intent behind it.”

Due to the little association SOAP has with security, “there are several ways to integrate security with Web services.” The 2 most common are the industry standard Secure Sockets Layer (SSL) and a Virtual Private Network (VPN). However, both of these “approaches to communication security” do have their shortcomings and are some times quite limited. “Another approach is to use one…of the emerging standards of XML document security.” These standards define “a range of cryptographic mechanisms, including the use of both conventional and public key cryptography.” Also, this standard defines methods for digital signatures on XML documents, as well as methods of “registering and looking up public keys for use with” both the encryption and digital signature systems. Furthermore, authorization regulations can be managed with the Security Assertion Markup Language (SAML).

The only major problem with utilizing XML security standards for web service security is whether or not application developers will actually use these standards. Historically, the design of security systems has been separate from the actual design of applications. “Many application developers have viewed the security mechanisms as too costly” to implement, either in costs to integrate it with the applications or their effect on program performance. Regardless of whether or not programmers will actually utilize these security mechanisms, “if web services are to become truly ubiquitous [(everywhere)], they will need better security.”

Chapter 7: Network Security

In today's world where the possibilities of Internet technology are constantly growing, vast amounts of confidential information on just about anybody are held within hundreds of thousands of internet-hosted computer networks. With the constant threat of malicious hackers gaining unauthorized access to the information held within these networks, it goes without saying that demand for highly reliable network security is at an all-time high. Entercept Security Technologies has developed an award-winning, multi-layered server security solution to help meet this demand.

What Is It?

Unlike traditional security solutions, Entercept identifies and stops known and unknown intrusions that exploit network security holes, before malicious code is executed. The server security solution safeguards the computer network by utilizing behavioral rules and signatures to identify anomalous behavior and block attacks in real time. Entercept also provides an additional level of security with shielding protection for your Web sites and applications.

What It Does

Entercept security solutions provides a protective shield around Web and network host servers, ensuring the integrity of the network, its applications and files, including sensitive and/or confidential data. Entercept also provides intrusion-detection and prevention solutions for implementation on application servers. The security software decides whether to permit a system call inside a server based on the signature of the call and set behavior rules. For example, if a hacker were seeking a password file on a web server, that behavior would be contrary to the normal behavior of someone accessing a web page and would not grant access.

How It Works

Entercept uses a multi-layered approach to network security. At the first layer, Entercept analyzes web traffic as it enters the network determining if the traffic is harmless or an attack. If traffic is determined to be malicious, it is blocked and the system is not compromised. A unique advantage of Entercept is that HTTP analysis occurs after any SSL decryption. Thus, if the hacker encrypts his attack, Entercept will still see and stop it. At the next layer, Entercept puts a shield around the Web server. The Web server is restricted to performing activities that are known to be valid. Entercept also shields the resources that belong to the Web server from unauthorized manipulation. Even if an attacker gains administrator-level access to an Entercept-protected Web server, he or she would not be able to alter any Web page content. At the final layer, Entercept protects the operating system’s binaries from alteration. Entercept’s patented buffer overflow exploit prevention blocks the execution of malicious code as a result of a buffer overflow. Buffer overflow attacks are extremely common and are the preferred method of attackers for gaining access to a server. Entercept blocks buffer overflow exploits regardless of the specific attack or application used. This protects Entercept users from future attacks as well as today’s known attacks.

What Are Its Downfalls?

For Entercept to be effective, the security solution software must be installed and implemented on every server within the network, and it must run constantly. Therefore, implementation of Entercept can be very expensive, but its protection is well worth the cost.

1

Its Advantages Over Other Security Solutions

Entercept security is designed to compete with traditional network and host-based intrusion-detection systems. Unlike most common security applications, which react to attacks that have already damaged files or networks, entercept proactively prevents unauthorized intrusions and attacks, and it provides real-time analysis and reaction. Also, Entercept is incredibly flexible in defining its security policies that fit the business needs of the company it is protecting. It has a built in exception feature that lets you allow events for specific users, helping reduce the number of false positives. Security administrators are also able to change the security level of signatures within the entercept database to better correspond to your security policy.

Glossary

anchor: In desktop publishing, to fix a graphical object so that its position relative to some other object remains the same during repagination. Frequently, for example, you may want to anchor a picture next to a piece of text so that they always appear together.

(Go Back)

applications: A program or group of programs designed for end users. Software can be divided into two general classes: systems software and applications software. Systems software consists of low-level programs that interact with the computer at a very basic level. This includes operating systems, compilers, and utilities for managing computer resources. (Go Back)

behavior rules: Refers to allowable access and usage of a computer system. (Go Back)

bookmark: A marker or address that identifies a document or a specific place in a document. In this context, it refers to a location within a document. Bookmarks are useful, because they allow easy navigation to different areas of a document. You just used a bookmark to jump to this definition. (Go Back)

CRs: A carriage return is a special code that moves the cursor to the beginning of the current line. (Go Back)

document hierarchy: Document hierarchy refers to various pages being at a higher level or a parent page of other pages. (Go Back)

DTD specification: Short for document type definition. A DTD states what tags and attributes are used to describe content in a web document, where each tag is allowed, and which tags can appear within other tags. For example, in a DTD one could say that LIST tags can contain ITEM tags, but ITEM tags cannot contain LIST tags. (Go Back)

Electronic Data Interchange (EDI): The transfer of data between different companies using networks, such as the Internet. As more and more companies get connected to the Internet, EDI is becoming increasingly important as an easy mechanism for companies to buy, sell, and trade information. (Go Back)

element: This just refers to a set of HTML tags. (Go Back)

embedded: This is a method of inserting a multimedia object into a document. Embedding the object, rather than simply inserting or pasting it, ensures that the object retains its original format. In fact, you can modify the embedded object with the original program. (Go Back)

Formal Public Identifier (FPI): This is a formal declaration of a document name. (Go Back)

header: A header is a section preceding a document which contains important information about the document’s author, origin, and content. (Go Back)

hexadecimal: Refers to the base-16 number system, which consists of 16 unique symbols: the numbers 0 to 9 and the letters A to F. For example, the decimal number 15 is represented as F in the hexadecimal numbering system. In the context of web design it signifies a color, the first 2 numbers indicating the amount of red, the second 2 numbers indicating the amount of green, and the final 2 numbers indicating the amount of blue. (Go Back)

HTTP: HyperText Transfer Protocol, the underlying protocol used by the World Wide Web. HTTP defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. (Go back)

ICADD: International Committee for Accessible Document Design, which is dedicated to making printed materials accessible to persons with print disabilities. (Go Back)

IETF: The Internet Engineering Task Force (IETF) is a large open international community of network designers, operators, vendors, and researchers concerned with the evolution of the Internet architecture and the smooth operation of the Internet. It is open to any interested individual. (Go Back)

ISO: International Organization for Standardization, an international organization composed of national standards bodies from over 75 countries, which define a number of important computer standards. (Go Back)

manipulate fonts: This just refers to changing a font’s size, type of font, color, and appearance. (Go Back)

markup language: A Markup language is a web-based authoring method which involves composing a document in plain English, then marking it up with tags to generate the desired visual result. (Go Back)

META tags: The HTML META tag is used to describe the contents of a Web page. (Go Back)

nestable: Nestable indicates that an object can be placed within itself. (Go Back)

parsing behavior: When a browser automatically removes most editing marks, such as cursors returns and multiple spaces. (Go Back)

physical style element: A visual style which is definite regardless of browser type. (Go Back)

plug-in: A software module that adds a specific feature or service to a system. For example, there are number of plug-ins for the Netscape Navigator browser that enables it to display different types of audio or video messages. (Go Back)

Public Text Identifier: see Formal Public Identifier (Go Back)

scripting language: A type of computer language which must be compiled, or interpreted by a program in order to run. (Go Back)

SGML Document Access (SDA): Standard Generalized Markup Language, a system for organizing and tagging elements of a document. (Go Back)

source code: This is the set of instructions written by a web author or programmer that tells the computer how to interpret and run a program or web document. The raw HTML is an example of source code. (Go Back)

source tags: Refers to HTML tags (Go back)

string: Basically a line of text, which is treated as one object. (Go Back)

style sheets: A separate, included document which holds a website’s style information, or how its content shall be displayed. (Go Back)

traditional methods: This refers to business that is not conducted over the Internet. (Go Back)

URL activation: Anytime a user has clicked on an active hyperlink. (Go back)

virtual style element: Unlike Physical Style Element, this style information is not definite and is dependent on the browser to determine exactly how it is displayed. (Go back)

W3C: World Wide Web Consortium, an international consortium of companies involved with the Internet and the Web. The organization's purpose is to develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions. (Go Back)

web browser: A program that interprets HTML code to display a web document. (Go Back)

whitespace: Basically, any black (or white) area in a document. (Go back)

XML: Short for Extensible Markup Language, a specification developed by the W3C. XML is a pared-down version of SGML, designed especially for Web documents. It allows designers to create their own customized tags, enabling the definition, transmission, validation, and interpretation of data between applications and between organizations. (Go Back)