Introduction to HTML

by Jesse Smith

This introduction is intended for the use of the basic beginner who wants to make minor modifications to an existing website. Website design is a huge topic, and what with Java Scripts, Cascading Style Sheets, Flash objects, additional programming languages such as php, and database integration systems such as MySQL, there is no way to write a complete overview that would be concise. Thus we hope to present merely a glimpse of a shadow that may bring with it the foundation of understanding.

The language

HTML stands for Hyper Text Markup Language. It is a basic system of computer coding that tells a web browser how pages are laid out and what is included in the page’s content. The rules for HTML are defined by the World Wide Web Consortium, an independent committee whose major concern is accessibility and ease of use. However, unfortunately, one of the first things a web designer learns is that the people who create web browsers do not always respect the standards set out by the W3C. The best known of these non-standards-compliant browsers is Internet Explorer, which unfortunately also happens to be the most widely used browser. As a result, certain commands work in some browsers but not in others, and therefore every layout must be tested in multiple browsers prior to launch.

The markup

“Hypertext” generally refers to text that is interactive; it links to other text. It is a term that has existed since decades before the computers were invented that would make it possible; and thus html is the name of the programming language that most web pages are written in, even though a typical modern web page contains much more information than merely the viewable text.

The markup is everything in the code that is not viewable text: it specifies fonts, sizes, colors, images, scripts and the total page layout. Markup elements are indicated within the source code by “less than” < and “greater than” > symbols used as brackets. Thus for example a common header followed by a paragraph would look like this in the markup:

<h1>This is the header</h1>

<p>This is the paragraph. The font for the header is by default a much larger size than the font for the paragraph. Font sizes and other attributes for headers and paragraphs are typically controlled by CSS (a Cascading Style Sheet).</p>

You can see from this example that these elements have an opening and a closing tag. Tags that control layout, text properties and links all end in this manner. Objects such as images do not require a closing tag but are complete with a single string, as in this example:

Any object or text can be a link if it is enclosed within the <a></a> tags:

<a href=”www.websitelocation.com”>These words will be a link.</a>

<a href=”anotherpage.html”>For a page within the same directory</a>

A basic page

It is easiest to learn by example. The following is a sample html page for the beginner.

Every html page should begin with a declaration of which version of html it is written in. For now let’s use this one:

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

This is followed by basic page elements:

<html>

<head>

<title>Page Title</title>

</head>

<body>

Within the body, we’re going to lay out some elements in a table. Tables are arranged in rows, and the rows are divided into cells.

<tr>

<td colspan=”3”><h1>Welcome to My Page!</h1>

</td>

</tr>

<tr>

<h1>Page design by Basementia Design</h1>

<p>We have a variety of <a href="http://www.basementiadesign.com">website design and maintenance</a> services available; please <a href="http://www.basementiadesign.com/contact.php">contact us</a> for more information. </p>

</td>

<td width="120"><p>I can put commentary, images, advertisements and links in the sidebars.</p>

</td></tr>

<tr>

<td colspan=”3”><p>Thanks for visiting Basementia Design. Visit us again at <a href=”http://www.basementiadesign.com”>www.BasementiaDesign.com</a>

</p></td></tr></table></body></html>

The sample page described above is posted here so you can see what the code will look like when it's implemented and read by a browser. Of course the sample image name was made up, so you'll probably see some sort of icon representing a broken image link, depending on what type of web browser you are using.

Thanks for joining Basementia Design for this brief tutorial on introductory html. Join us next time for a brand new article entitled, "What is CSS?" It will be posted right here on www.BasementiaDesign.com so be sure to check back in with us.