Introduction to HTML

COSC 1301
Introduction to HTML

HTML, or HyperText Markup Language, is the standard set of codes used on the Internet to design and view World Wide Web pages. HTML documents are basically text documents (also known as ASCII documents) which can be typed up on a word processor, or plugged in automatically using an HTML editor. What makes HTML documents functional, however, are the codes that are inserted throughout the text, which in turn tell a computer's web browsing software how the document should appear and behave on the screen.
Here is a basic example of HTML:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<body>
<H1>Western Texas College Home Page</H1>
Welcome to Western Texas College!
This site is designed to help teach HTML.

COSC 1301
</body>
</html>
This text looks like the following when viewed with a web browser:

Western Texas College Home Page

Welcome to Western Texas College! This site is designed to help teach HTML

COSC 1301

HTML uses what are known as markup tags (also just referred to as tags) to let a Web browser like Netscape Navigator or Internet Explorer know how to display the document. Tags are always surrounded by brackets (< and >). For example, the <TITLE> tag specifies the title of a document. (Note: HTML is not case sensitive, so you could also use <title> instead of <TITLE>.) You can see a title tag in action at the very top of this web page's window, where it says Introduction to HTML.
In order for your web browser to recognize the end of a given title, it needs a corresponding close tag - which in this case is </TITLE> - directly following the actual title of your web page. Notice how this </TITLE> tag includes a slash (/) before the word TITLE. In HTML, slashes are always used to connote the end of a command. So, if you look through the example, you'll see that nearly every type of tag has a corresponding close tag which includes the slash. Without these corresponding tags, your browser would never know when a given HTML command is complete. The only kind of tag you'll see in our example that does not have a corresponding close tag is the paragraph tag, which appears as <P>. The <P> tag is used to signify the end of a paragraph, so only one tag is needed, directly following a paragraph of text. Your textbook recommends using a closing tag but it is not required.

Essential HTML Tags

At the top of any HTML document, you're bound to find three tags, <HTML>, <HEAD> and <BODY>. The purpose of the HTML tag is to tell the web browsing software that the document it's looking at is indeed an HTML page. Be sure to place <HTML> at the top of every HTML page you create. And don't forget to place a </HTML> tag at the bottom of every document.
Similarly, the head tag and the body tag help out the web browser in interpreting the HTML. <HEAD> is used to tell the browser what part of the document is the top section, or the head. The rest of the document is known as the body, and therefore, it gets designated with a <BODY> tag. So, the head of our above example would be

<HTML>
<HEAD><TITLE>Western Texas College Home Page</TITLE>
<H1>The Western Texas College Home Page</H1>
</HEAD>

while the body of the document is

<body> Welcome to Western Texas College! This site is designed to help teach HTML. </body>

In both cases, </HEAD> and </BODY> tags are used at the end of their sections to explain to the web browser when each particular section is complete.

The use of <HTML>, <HEAD>, and <BODY> tags may seem like a waste of your time, but many web browsers will have a hard time interpreting the HTML code without them. So, be sure to get into the habit of using them.

I will expect you to use all 8 basic tags (<html>, <head>, </head>, <body>, </body>, </html>) for each webpage you write for this class. Some modern browsers will correctly display your webpage without some of them but older browsers will be confused and not display your page correctly. You never know which browser your viewers are using. I take off points on your assignments if all 8 tags are not included in your HTML source code.

As for the other tags used within our example here, they'll all be explained throughout the rest of this course.