HTML Basics

This tutorial is for the beginner in HTML. It is best for the beginner to start at the beginning and read through the document. Anyone familiar with some HTML can jump to any topic below.

Brief History and Overview of HTML and the World Wide Web
What is HTML
HTML Format and Tags
HTML Heading and Text Tags
HTML Structured Tags
HTML Style Tags
Links
Naming Your Files
Good HTML Practice
Placing your first Webpage on the Internet
Glossary of Terms

Brief History and Overview of HTML and the World Wide Web-

The World Wide Web took 35 years in the making. A world wide network had been around since 1961 in one form or another. By mid 1970's government agencies, universities and research facilities had an internetwork in place. In 1991 at the University of Minnesota there was a data-indexing and retrieval experiment called Gopher that was well accepted on the net. This was the precursor to the World Wide Web in concept.

The lacking of hyperlinks and graphics lead to the next level. In 1990 Tim Berners-Lee put together the first elementary browser and authoring system with a quick hypertext language to serve his purpose and created the World Wide Web. Later he became the director for the World Wide Web Consortium.

Since early browsers were only text based there was a need to add graphic displays to the web. In 1993 the University of Illinois released a browser called Mosaic. A college student working an the Mosaic project, Marc Andreessen. added an <IMG> tag to the browser which meant instant graphics. By mid 1993 there were 130 sites on the WWW. It spread like a disease and within a year there were two million users on the Web with Mosaic. Marc later founded Netscape Communications Corporation. With free trial offers and many new features and cross platform availability, Netscape Navigator became the most popular browser on the web.

The growth was so rapid it caught the eye of Microsoft and in 1995, they introduced Internet Explorer Web browser. Many other online services followed like CompuServe, America Online and Prodigy.

What is HTML-

HMTL is a hyperlink mark-up language. It is not a programming language. It allows a Web publisher to create complex web pages to be viewed by anyone that has a browser. HTML is used to mark up a text document with standard ASCII text indicating the format (presentation style) to use when displayed on a browser. Everything in HTML relies on tags.

One thing to understand is you are not in complete control of what your document looks like. The browser people use to view your document determines the final look of your document. Your responsibility is to provide a logical structure and not be too concerned about the physical appearance. With the use of HTML tags you provide the basic instructions that the browsers will interpret and format the results.

All you need to get started in HTML is:

Knowledge of the HTML tags (which you will learn here)
A good text editor
A browser for viewing the results.

HTML Format and Tags-

All HTML tags are inserted in < > and most come in pairs and must be closed with </ >. All tags read left to right and top to bottom.

There is a basic document template all HTML pages must have and it is as follows.

<HTML>

<HEAD>
<TITLE>HTML Basic Document Format</TITLE>
</HEAD>

<BODY>
This is where the content of the webpage is placed.
</BODY>

</HTML>

Notice how the document opens with a <HTML> tag and ends with an </HTML> tag.

Also there are two parts of the document.

The <HEAD> which contains information regarding the document
but does not appear in the browser window.

The <BODY> which contains all information that will appear in
the browser window.

All tags in the basic format are open and closed tags following this format.

< >...</ >

The <TITLE>...</TITLE> tag always appears in the <HEAD>...</HEAD> tag. Whatever is placed between the <TITLE> tag will appear in the bar on top of the browser window. This is where to put the title of your page and any other pertinent information.

HTML Heading and Text Tags-

Heading Tags

All heading tags follow the format of <H1>...</H1>. They carry an automatic double space after using these tags so they stand alone.

The following are examples of these tags:

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

You can go smaller but what's the point.

Text Tags

Font size can be specified with the <FONT SIZE>...</FONT>> tag. There are 12 different font sizes. Notice
how this tag opens with the font size and closes with only font. That is because there are other font tags like
<FONT COLOR>...</FONT> which is use to specify a color for a font.

Here is an example using both font size and font color.

<FONT SIZE=5>...</FONT>

There are also tags used for text formatting.

One is the Paragraph tag which is the equivalent of two hard returns. This tag can be used as an open and closed tag or as a single tag.

<P>......</P> or

Another is a line break tag.

<BR>

There is also the blockquote tag, which indents all of the text that is between the tags.

<BLOCKQUOTE>....</BLOCKQUOTE>

HTML Structured Tags-

The best control over your document comes down to structure. The browser will turn your structure into a visually pleasing form.

Horizontal Rule Tags

Dividing up your page can help organize your information. This can be done with the Horizontal Rule tag shown as follows:

<HR>

This is a stand alone tag. You can add style to this tag by adding a width and/or size to the tag. This is the regular <HR>

Adding the width tag you can determine the width of the horizontal rule. You can use either pixels or percentages as such.

<HR WIDTH=75%>

The size can also be changed.

<HR SIZE=8>

They can also be combined like this.

<HR WIDTH=75% SIZE=8>

Lists Tags

Another way to organize your information is to use a list. There are three kinds of lists. The organized and unorganized lists are useful for creating lists and outlines. Unorganized lists have items preceded by a bullet while ordered lists will be displayed with numbers. The tags used in these lists are <UL> and <OL> respectively. Each item in both lists will begin with the list item tag <LI>.

This is an example of an unordered list.

<UL>

<LI>Unordered list item 1
<LI>Unordered list item 2
<LI>Unordered list item 3
<LI>Unordered list item 4

</UL>

And this is the result:

Unordered list item 1
Unordered list item 2
Unordered list item 3
Unordered list item 4

This is an example of a ordered list.

<OL>

<LI>Blue
<LI>Yellow
<LI>Red
<LI>Purple

</OL>

And the result:

Blue
Yellow
Red
Purple

There is also the definition list which is tagged as follows.

<DL>

<DT>Blue
<DD>Yellow
<DT>Red
<DD>Purple

</DL>

The results of the definition list appear below.

List Item 1: About Item 1
List Item 2: About Item 2

HTML Style Tags-

Style tags are used to change the pace of the document. Physical style tags tend to display in the browsers in the same way.

Boldface text
<B>....</B>
This is an example of bold text.

Italic text
<I>....</I>
This is an example of italics text.

Underline text
<U>....</U>
This is an example of underlined text.

Typewriter font
<TT>....</TT>
This is an example of typewriter text.

Center whatever follows this tag
<CENTER>....</CENTER>

This is an example of the center tag.

Preformatted text
<PRE>....</PRE>

This is an example of preformatted text.

There are also logical tags where the appearance of these formats is left up to the browsers.

Emphasis
<EM>....</EM>
This is an example of emphasised text.

Bibliographic citation (in italics)
<CITE>....</CITE>
This is an example of a citation.

Definition is used to make a term stand out.
<DFN>....</DFN>
This is an example of a definition.

The main idea is to convey your concepts through words rather than what you want them to look like. There is little control with all the different browsers out there. Individuals can also set their parameters on there browser to have a certain look and you have no control over that.

Links-

Hyperlinks are used to make the jump from document to document. The basic tag is written below.

<A HREF="protocol://hostname/path/filename">Text to click</A>

The actual link address, which appears between the two double quotes, can be a relative address or an absolute address depending on where the object is either on your server (relative) are somewhere in cyberspace (absolute). The browser assumes that the URL is relative unless a complete address is included.

This tag can also be used to jump to a particular part in the same document. This is done with the addition of the name tag. First you use the basic hyperlink tag as such.

<A HREF="#name of point to jump to">Text to click</A>

Instead of the URL there is the pound sign (#) and an assigned name. The name tag, which has the same assigned name, is placed before the link tag. The name tag appears as follows.

<A NAME="name of point to jump to">

A hyperlink tag is used to open the browser email composition window. The tag is a mailto: link which appears as follows.

<A HREF="mailto:name@mailserver.edu">....</A>

Images that appear in webpages are also a hyperlink. The image tag is as follows.

<IMG SRC="imagefilename.jpg" ALT="image description">

Notice the ALT="image description" in the tag. This will display text in a small box when the mouse rolls over the image in the web page. Hyperlinks can be nested. An example of nesting is used when an image is used to jump to another document.

<A HREF="protocol://hostname/path/filename"><IMG SRC="imagefilename.jpg" ALT="image description"></A>

Naming Your Files-

The 'Homepage' or top page is always named index.html. This is a default filename that browsers bring up when a filename is not included in the URL address.

HTML and image files need to have simple names that tell you what they are. They should have all lowercase characters and never use spaces within file names.

Good HTML Practice-

Pages need to be:

Readable-Keep pages simple and make sure they are readable. Avoid too many images and general clutter. Be sure if using dark backrounds that the text is light enough to read it and images are noticable.

Navigatable-Use links to easily navigate your pages. It is always good practice to use a navigational tool on every page so it is easy to get around.

Downloadable-Keep images small (less than 50k), and keep the pages as short as possible for faster downloading time. If you use an image map, provide an alternative text only version for people who don't.

Identifiable-Include webmaster information in the footer of every page and provide a method of contact. Always honor copyright laws, particularly in borrowing images. You must ask for permission to use images.

Relevant-Make sure your information is worth publishing.

Current-Maintain your pages! Keep all your links functional. It is best to keep a last updated date in the footer on every page. If your information is obsolete Please delete it from the web.

Placing your first Webpage on the Internet-

After your document is complete you can upload your files using an FTP program such as WS FTP or Fetch. Be sure to check your work and make sure everything is in working order.

Glossary of Terms-

DTD: (Document Type Definition) A formal SGML specification for a document, a DTD lays out the structural elements and markup definitions that can then be used to create instances of documents.
FTP: (File Transfer Protocol) A procedure used to upload files onto a server.
HTML: (Hyper Text Markup Language) A type of SGML. It is a collection of platform-independent styles that define the various components of the WWW document. The Internet protocol used to manage communication between Web clients (browsers) and servers.
SGML: (Standard Generalized Markup Language) A standard for describing markup languages.
URL: (Uniform Resource Locator) An "address" of an object on the Internet. The format is protocol://hostname/path/filename. URLs cannot contain any spaces and are case-sensitive. The protocol is often "http".
WWW: (World Wide Web) A complete collection of all Web servers available on the Internet.

Intermediate HTML
Back to Homepage