Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Getting Started

Site diagram illustrating root folder, images folder, media folder, and three HTML pages

To get started with you Web project you need to set up your site with the proper structure. Site structure is very simple. Your project has a "root folder" that contains all of the files associated with the site. Inside the root folder (which, by the way, can have any name you wish, it doesn't have to be called "root") will be sub folders for specific types of files. While the HTML Web pages will be "loose" in the root folder, all the images will be in an image folder, PDF files in a PDF folder, and so on. The diagram on the right illustrates a standard Web site structure with three HTML pages and two sub folders.

One you have your site set up on your computer with a root folder and the necessary sub folders you can start to build your first Web page. This will probably be your home page. Unless instructed otherwise, your home page will have one of these names:

index.htm
index.html
default.htm
default.html

The exact name will be specified by your Web master maintaining the host server for your site. Most Web hosting servers have a hierarchy of names. When a site visitor types into his or her browser the URL of a Web site, the browser is directed to the host server. The host server automatically looks for the name of the home page based on the order of the list, and when it is found it sends the page and all of its associated files to the visitor's computer where the browser assembles it on the screen.

If the server doesn't find the preferred home page name in the collection of HTML files it automatically looks for the second file name in the hierarchy. If that page isn't found it looks for the third page name, and so on. It is helpful to giver your home page the preferred home page name on your host server so that the time lost to the search process is reduced.

Your first step is to open a new document with NotePad (or whichever program you decide to use) and then save it in your root folder with one of the home page names noted above.

Setting Up the Basic Code

A Web page consists of two parts, the head and the body. The head contains information about the page, such as meta tags, when it was made, and the specifications of the code itself. The body contains the material that is seen when the page is viewed. The data in the head is not visible, although it may specify how the "stuff" in the body is displayed. All the tags, including the head and body tags, are located inside what can be called the "ultimate container tags," <html></html>, which tell the browser that everything inside them is for a Web page.

<html>
</html>

Start by typing the opening and closing HTML tags <html></html> as shown in the illustration on the right.

 

 

<html>
<head>
</head>
</html>

Now add the opening and closing tags for the head of the HTML page so that the code looks like the example on the right.

 

 

<html>
<head>
</head>
<body>
</body>
</html>

So far, so good. Now add the body tag.

Save the file.

 

 

 

<html>
<head>
</head>
<body>
This is my first Web page!
</body>
</html>

Now add some text into your Web page so that you have something to see when you test it. It must be typed in the body, between the opening and closing body tags.

Now you can start your Web browser, Internet Explorer, Firefox, Mozilla, Safari, Opera, or whatever your favorite is. Open your new Web page and view the file. In most browsers you will click File> Open (or Open File)> then navigate to your saved Web page and click OK.

To see what your Web page may look like, click here. The example will open in a new window.

NOTE: We have added a "Close Window" button to make it easier to get the page to disappear.

Now you can add some data to the head part of the Web page that will be helpful to your visitors.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
This is my first Web page!
</body>
</html>

Inside the head tags, create a title tag and type in a title for your page. Titles are not names of the files. Rather, they appear in the top bar of a browser and help identify to the visitor which page is being viewed. They may also be used by search engines to determine what a page is about.

Save and view your page again. You will see your page's title at the very top of the browser.

NOTE: It isn't necessary to follow the File> Open sequence every time you view a saved page. Just make sure your page is saved then click the Refresh or Reload button (depending on which browser you are using.