Introduction to FrontPage
Document Actions
Web Page Creation: Part 1, HTML Basics
Learn the basics of HTML. This is the first of seven technical documents about how to create a Web page.
What Do I Need To Get Started?
First, make sure you have either a Texas A&M University UNIX account or access to another available Web server. A UNIX account provides 20 MB of space for storing your Web page. UNIX has a Web server that allows the world to view your Web page. If you were to store your Web page locally on your own computer, then you would be the only person able to view it.
Second, you need a text editor to write your HTML code. For the purposes of this tutorial, use Notepad. Notepad can be found by following this path in the Open Access Labs: Start > All Programs > Accessories > Notepad.
If you are not in an Open Access Lab, and if your operating system is either Windows 98 or NT, Notepad is still located by following this path (see Figure 1).
Figure 1. Opening Notepad
Other editors, called WYSIWYG (What You See Is What You Get) editors, are available. Examples of WYSIWYG editors are Microsoft Word, Microsoft FrontPage, Netscape Composer, Adobe GoLive, Allaire HomeSite, Macromedia Dreamweaver, and NetObject Fusion.
If your goal is to develop a Web page, then WYSIWYG editors are useful tools. However, if you are interested in actually learning how to design a Web page, these tools are not encouraged because they do not allow you to learn how to write HTML source code on your own.
In addition, even though WYSIWYG editors are easier to use, these editors do not always allow you to do exactly what you want to do with a Web page. In these cases, knowing HTML is always helpful so that you can edit the HTML source code.
You also need to use a Web browser to view the progress of your Web page. People will use popular Web browsers such as Microsoft Internet Explorer, Netscape, or Mozilla Firefox, so it is a good idea to view your Web page in multiple browsers to determine whether your document looks the way you intended.
Finally, you need to use a file transfer utility to transfer your documents to your UNIX account. Although any utility will work, CIS recommends using Winsock FTP (a.k.a. WS-FTP), which is included with TAMUNet. For more information, see Web Page Creation: Part 7, Web Directories and FTP Procedures.
HTML Document Structure
HTML Tags
HTML uses special objects called tags to format Web pages. The use of tags makes HTML a container‑based language. A visual representation of a tag is a colored glass bottle (a container). Imagine pouring water into the colored glass bottle. When you view the water from outside its container, the water appears to have the same attributes as the bottle; for example, they both have the same color and shape. A tag acts like the colored glass bottle, except that it changes attributes of text and images instead of water.
Figure 2 shows an example of a group of tags that displays the structure of an HTML document:
Figure 2. Source code #1
The concept of “opening” and “closing” tags is important to understand. A tag is opened by using the following construct:
<TAG> where TAG represents the name of the tag you are using
The tag is then closed by using the following construct:
</TAG> where TAG represents the name of the tag you are using
All tags must be opened to be used. Most but not all tags must be closed. Opening a tag gives the Web browser information on how to handle the text between the opening and closing of the tag. Explanations of the tags used in source code #1 are provided below.
Explanation of source code #1
| Tag | Description |
|---|---|
| <HTML> | Whatever comes after this tag is interpreted as an HTML document. |
| <HEAD> | Whatever comes after this tag is not displayed when this document is viewed with a Web browser (the only exception to this is a <TITLE> tag). |
| <TITLE> | Whatever appears after this tag appears in the title bar at the top of the Web browser window. |
| </TITLE> | Closes the title. |
| </HEAD> | Closes the head section of the document. |
| <BODY> | Whatever appears after this tag is displayed in the body of the Web browser. |
| </BODY> | Closes the body section of the document. This is the end of all text displayed in the body of the Web browser. |
| </HTML> | Closes the HTML document. |
Note that tags can be nested within other tags, as exhibited by <TITLE></TITLE> being placed within <HEAD></HEAD>. Whenever a tag is opened within a tag, the inner tag must be closed before closing the outer tag. In the source code #1 example, notice that </TITLE> comes before </HEAD>. If this rule is not followed, errors will result in the way your HTML code is interpreted by a Web browser.
Also, notice that in Figure 2 the tags are indented to emphasize the structure of the document. Tags nested inside of other tags are indented to show the relative relationships of the tags. When you develop your own Web page, use this format. Although indenting is not necessary, it improves the readability of your code.
Figure 3 shows how source code #1 appears when displayed with a Web browser.
Figure 3. Source code #1 displayed on a Web browser
Attributes of HTML Tags
Attributes of HTML tags offer ways to alter the way elements look on your Web page.
<TAG_NAME ATTRIBUTE_NAME="value of attribute"></TAG_NAME>
Unlike tags, attributes do not require closing. Thus, none of the attribute names or attribute values needs to be included in the closing tag. In addition, do not forget to include double quotation marks around the value of an attribute. Otherwise, errors will result when a browser tries to interpret your HTML code.
As an example of how to use attributes, we will change the background and text colors of the document from our previous example. Figure 4 shows the source code.
Figure 4. Source code # 2
BGCOLOR sets the background color of the Web document to the color black, and TEXT sets the color of text in the document to white. Figure 5 shows how the browser displays this code.
Figure 5. Source code #2 displayed on a Web browser
If you would like to learn more about HTML, read the other handouts in this series:
- Part 1, HTML Basics
- Part 2, Formatting Text
- Part 3, HTML and Images
- Part 4, Using HTML to Create Lists
- Part 5, Creating Links Using HTML
- Part 6, HTML and Tables
- Part 7, Web Directories and FTP Procedures
For More Help
If you need more assistance, please feel free to ask the CIS Support Staff in any Open Access Lab, or call Help Desk Central at (979) 845-8300.