Have you ever wondered how a Web page works? Have you ever wanted to create your own Web page, complete with titles and text and graphic icons? Have you ever heard the word "HTML" and wondered what it means? If so, then read on...
In this article, we will look at the art and science of Web pages and experiment with a number of techniques that you can try out on your own machine today. We've even created a tool that lets you try out HTML and view it instantly. As it turns out, Web page creation is both incredibly easy and a lot of fun, and totally within your reach. By the time you finish reading this article, you will be ready to start assembling your own!
At this moment, it is nearly guaranteed that:
> You are sitting at your computer.
> You are using a Web browser to read this page, and that browser could be Microsoft Internet Explorer, Firefox or maybe Netscape.
Because you are sitting at a computer, you have a Web browser and you possess the desire to learn, you have everything you need to get started. You can learn HTML and experiment with your Web browser to find out how to create any kind of Web page you can imagine.
In order to talk about Web pages and how they work, you will want to understand four simple terms (and if some of this sounds like technical mumbo-jumbo the first time you read it, don't worry):
> Web page - A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. The tags are simple instructions that tell the Web browser how the page should look when it is displayed. The tags tell the browser to do things like change the font size or color, or arrange things in columns. The Web browser interprets these tags to decide how to format the text onto the screen.
> HTML - HTML stands for Hyper Text Markup Language. A "markup language" is a computer language that describes how a page should be formatted. If all you want to do is display a long string of black and white text with no formatting, then you don't need HTML. But if you want to change fonts, add colors, create headlines and embed graphics in your page, HTML is the language you use to do it.
> Web browser - A Web browser, like Netscape Navigator or Microsoft Internet Explorer, is a computer program (also known as a software application, or simply an application) that does two things:
1 A Web browser knows how to go to a Web server on the Internet and request a page, so that the browser can pull the page through the network and into your machine
2 A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed
Web server - A Web server is a piece of computer software that can respond to a browser's request for a page, and deliver the page to the Web browser through the Internet. You can think of a Web server as an apartment complex, with each apartment housing someone's Web page. In order to store your page in the complex, you need to pay rent on the space. Pages that live in this complex can be displayed to and viewed by anyone all over the world. Your landlord is called your host, and your rent is usually called your hosting charge. Every day, there are millions of Web servers delivering pages to the browsers of tens of millions of people through the network we call the Internet
It is extremely easy to experiment with Web pages without using a server. Your browser can view the Web pages you create from your personal machine. Once you understand how to create your own pages, it is likely that you will want to put them "out on a server," so that people around the world can load your pages and read them.
Viewing the Source
Let's take a look at the "guts" of a Web page. This is the original text and HTML tags typed by the author and interpreted by the browser to produce the Web page you actually SEE on the Internet. With your mouse, right-click on any blank portion of this page and choose "View Source." A new window will appear, displaying words and characters, some of which may look pretty technical and foreign. These words and characters are, collectively, the HTML programming code you are about to learn. Each element within that code is known as an HTML tag. Don't be intimidated by how complex it looks -- you'll be surprised at how easy it really is. When you are done looking at the page's source code, simply close out the source page to return to this article.
You can look "behind the scenes" of almost any page on the Internet this way. When you become more involved in Web designing, you'll probably find yourself viewing the sources of complicated Web pages in order to learn the codes that the authors, or page designers, used to create such interesting arrangements
Now, let's learn what many of the tags mean, and start creating a simple page.
The HTML Tag

An HTML tag is a code element that tells the Web browser what to do with your text. Each tag will appear as letters or words between a < (less than sign) and a > (greater than sign).
Example: <center>, <body>
To tell the Web browser to "end" doing what you just told it to do, a forward slash is used in the closing tag:
Example: </center>, </body>
Most tags come in matched "beginning" and "ending" pairs, but this is not an absolute rule.
Any Web page you create will contain the following tags at the start of the page:
* <HTML>: tells the Web browser that this is the beginning of an HTML document
* <HEAD>: tells that Web browser that this is the header for the page (you'll learn later what goes between "HEAD" tags)
* <TITLE>: tells the Web browser that this is the title of the page
* <BODY>: tells the Web browser that this is the beginning of the Web page content -- everything you want to say and see on your page will follow this tag
The tags needed to end any Web page are:
* </BODY>
* </HTML>
Creating a Simple Page

There are many ways to create Web pages. Hundreds of companies have created tools to help with the process in one way or another. Our goal here, however, is to understand how Web pages really work, rather than have a tool hide the process from us. Therefore, we will use the simplest tools possible -- the ones already on your machine.
On your machine you have a program, or application, that can create simple text files. On Windows machines, this application is called Notepad. On a Macintosh, this program is called SimpleText. If you cannot find these programs, it is also possible to use a basic word processing program, like WordPerfect or Microsoft Word
Note:
> In a Windows 95/98 environment, click the Start button, click Programs, click Accessories and click Notepad.
> In a Windows 3.1 environment, click Accessories (in the Program Manager) and click Notepad
> In a Macintosh environment, click Macintosh HD, click Applications and click SimpleText.
Once you have the proper program open on your screen, type (or cut-and-paste) the following HTML text into the window:
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello there. This is my first page
</body>
</html>
Whether you put the tags and text side-by-side, row-by-row or indented will not make a difference in how the text is displayed in a browser window. Whether you use uppercase or lowercase letters within your tags also does not make a difference
Now you need to save this file somewhere so that you can find it in a moment. Save it to the desktop, or, better yet, to a directory that you set up to hold all of the pages you are going to create. Save it to the filename first.html.
Next, open the page in your Web browser (e.g., Microsoft Internet Explorer or Netscape Navigator). All Web browsers have a way to open a file stored on the local machine. In Internet Explorer and Netscape, select Open File from the File menu at the top of the window. Open the file first.html. When you open it in your browser, it will look something like this:
Now that you have created and viewed your first Web page, you are well on your way to becoming a Web page pro. The key to knowing everything about how a Web page works is to learn more and more of the HTML tags that let you customize your pages. You'll also want to learn about tools that can help you create tables, frames and graphics for your pages. This Web page series will guide you through all of the information you need.
Basic HTML Formatting Tags
You will use the basic HTML tags on this page all the time -- they do 90% of all the formatting that you see on most Web pages. Once you learn them, you are well on your way to becoming an HTML pro!
Bold, Italics and Underline
* Make any piece of text bold by adding the tag : <b>
* to the beginning of the text, and adding the closing tag : </b>
wherever you want the bold attribute to end.
This is <b>bold</b> : this bold
To italicize, use these tags in the same manner:
<i>.....</i>
This is <i>italicized</i>. : This is italicized.

To underline, use these tags:
<u>.....</u>
This is <u>underlined</u>.: This is underlined.
Breaks and Paragraphs

Although your typed text may contain carriage returns, tabs and extra spaces, browsers will not see them. You will have to use tags in order to create blank space in your HTML documents.
<br> creates a break between one line and another. You can use several of these tags together to create blank space.
This line is <br> broken. : This line is
broken.
<p> creates an extra space between two lines of text. If you place <br> in a line of text, it will only break the line; if you use <p>, it will both break the line and create an extra space.
This line is <p> spaced. : This line is
spaced
<hr>creates a horizontal rule, or horizontal line. : This is a horizontal rule:
Tabs
There is no formal HTML tag to create a "tab" within a document. Many Web designers create tables or use blank images to create space (tables and images are explained later in this article). One way to indent text is to use the tag <ul> to make the browser think you are about to create a "list." A list automatically indents text. Close with a </ul> to "end" the indentation. The tags <blockquote>...</blockquote> will also indent text.
Another alternative is the <pre> tag. This tag is used to display preformatted text -- text displayed "as is." Any spacing created within <pre> and </pre> tags will appear in the browser as it appears in the source.
Changing Font Color, Type and Size

Change the color of any text by using the tags:
<font color="color">...</font>
This is <font color="red">red</font>.: This is red.
This is <font color="green">green</font>. : This is green.
Most standard colors will work. Also try "lights" and "darks" such as "lightblue" or "darkgreen." You can also specify a particular hexadecimal color number, such as: <font color="#864086">.
If you would like to assign a specific color to the entire text of your page, add text="color" within the <body> tag.
Even if you assign a color to your entire text, you can still change the color of any portion of that text by using the tags you learned above.
Change the font type of any text by using the tags:
<font face="font type"> ... </font>
This is <font face="arial">arial</font>.: This is Arial.
This is <font face="geneva">geneva</font>.: This is Geneva.
Change the size of any text by using the tags:
<font size=value>...</font>
Example: <font size=4>
This font is <font size=+2>increased by 2</font>.: This font is increased by 2.
This font is <font size=+1>increased by 1</font>. : This font is increased by 1.
This font is <font size=-2>decreased by 2</font>. : This font is decreased by 2.
This font is <font size=-1>decreased by 1</font>.: This font is decreased by 1.
You can also change the font size by using the tags <small> and <big>:
This is <small>small</small> text. : This is small text
This is <big>big</big> text. : This is big text.
Heading tags also change font size, creating a bold "heading" for a paragraph or story:
<h1>This is an H1 heading.</h1> : This is an H1 heading.
<h2>This is an H2 heading.</h2> : This is an H2 heading.
<h3>This is an H3 heading.</h3> : This is an H3 heading.
End any font element change with the tag:
</font>
Or, by using the coordinating ending pair for the specific tag you used:
Example: </small>, </big>, </H2>
Creating Background Color

Change the background color of your page by adding bgcolor="color" within the <body> tag.
Example: <body bgcolor="yellow">
Again, as was described in the section on changing font color, you can use most standard colors, or use a Hexadecimal Color Code.
Creating Lists
There are three types of lists you can create: Unordered, Ordered and Descriptive
An unordered list looks like this
California Oregon North Carolina
An unordered list is a bulleted list initiated by the tag <ul>. The tag <li> (short for List Item) is used before each item in the list. The closing tag </ul> ends the list
The type of bullet can be changed to a "circle," "square" or "disc" by adding a specification within the <ul> tag
Linking to Other Sites
One of the best parts about Web pages is the ability to create links to other pages on the Web. Using the following anchor tags, you can reference other people's work, point to other pages you like, etc
<a href="URL">
Type in the title of the page after the anchor tag, and close the anchor with:
</a>

- sri