Chapter 1 Getting Started: A Simple Web Site

What is HTML?

HTML stands for HyperText Markup Language, the major language of the Internet's World Wide Web. Web Sites and Web Pages are written in HTML. With HTML and the WWW, you have the ability to bring together text, pictures, sounds, and links ... all in one place!

HTML files are plain-text files, so they can be edited on any type of computer. A webpage consists of simple text (content), plus tags. Tags represents the essence of HTML; whenever you want to make your text bold, insert an image or table, add music to your page, you use tags. Tags are special codes that wrap around various content to affect the content.

HTML tags

Web browsers recognize HTML tags, which are bracketed by ‘<’ and ‘>’. Most tags have opening and closing versions of the tags. Closing tags are the same as opening tag, but they carry ‘/’ in front of the name.

Example: <CENTER>welcome</CENTER>

à <CENTER> is an HTML tag for centering
à welcome is the text that gets centered
à </CENTER> is an HTML tag to end centering

**note: HTML tags are not case sensitive.

Example Page

Here is a example page. It’s titled "Welcome to HTML Tutorial" and has a line of text in it, a link, and an image saying "Summer Time".

 
Figure 1.1: A simple web site with a title, text, link, and image.


Figure 1.2: Source code for Figure 1.1. You can view the source code of any HTML file by selecting "View à Source" on the browser’s menu bar.

HEAD and BODY

Most HTML files begin with <HTML> tag and end with </HTML>. This tells the browser that you are using HTML language. The general format is:

<HTML>
<HEAD>
...head content
</HEAD>

<BODY>
...body content
</BODY>
</HTML>

Notice the nested structure of the HTML tags. Since <HEAD> comes after <HMTL> tag, </HEAD> need to come before </HTML> tag. The following example is INCORRECT:

<h1> ...<h2> ...</h1> ...</h2>.

This is wrong since the tags overlap and are not nested.

<HEAD> section contains information about the page, such as the site title, keywords, etc. Only the title is visible to the viewer (at the top of the window), and all other information is hidden.
<TITLE> is what gets copied to the bookmark, so it is important to put a short, descriptive title to your page.
<META> tags are used by search engines to turn up search queries, although they serve no purpose here.
Also notice that there are lines that start with ‘<!--‘ and end with ‘-->’. These are called comments. Comments are not visible to the viewer, and they are for the writers/readers of the source code to facilitate the reading.

<BODY> section contains the information that is visible to the viewer.

Inserting text

The text you write in your HTML file has no formatting. Except the spaces you put in, the return keys and tabs have no effect on how the text is displayed on the site. In our example, we have

<P>You can't have everything. Where would you put it?</P>

<P> tag indicates that a new paragraph is starting, thus there will be a line break and space between <P> tags. </P> tag indicates the end of the paragraph, but this is optional.

 

Exercise 1: Building your first Web page

1. Name your file:

-Start a Text editor program, such as Notepad
-On the menu bar, click on "File" à "Save As…"
-Name your file as *.htm file (ex: my_start.htm)
-Under "Save as type", choose "All Files(*.*)"
-Save it under your desired directory.

2. Title your page

-Type in the <HTML>,<HEAD>,<BODY> tags. You may refer to Figure 1.2 which demonstrates use of tags.
-In the HEAD section, type in the site title. Ex: <TITLE>Grace’s Home Page</TITLE>

3. Type in a line of text

-In the BODY section, type in "Hello, World!" a line of text wrapped in <P> tags. Ex: <P>Hello, World!</P

4. View the page

-Save your *.htm file
-Start Internet Explorer or Netscape
-Choose "File" à "Open"
-Select your file by browsing if you don’t know the absolute path
-Open file.

 

Inserting Links

Going back to Figure 1.1, you’ll notice a link below the text, saying "Here is a Link." Figure 1.2 shows the source code for this link:

<P><A HREF = "http://www.fart.com">Here is a Link</A></P>

<P> places the link text in a separate paragraph. The general format for inserting a link is: <A HREF = "destination">Link Label</A>

 

Inserting Images

The example page also includes an image saying "Summer Time". The most popular versions of graphics image are GIF and JPEG. Other formats include BMP and PNG. You can create these images using graphics editors such as Adobe Photoshop or Macromedia Fireworks.

Figure 1.2 shows how to add an image:

<P><img src="image1.gif"></P>

The usual format for inserting an image is: <IMG SRC = "image_file_name">

Exercise 2: Inserting a Link and Image
--add this to the site you’ve created in exercise 1.

1. Underneath the "Hello, World!" text, insert a link to the University of Rochester homepage (http://www.rochester.edu).

-The label should say: University of Rochester
-It should be the beginning of a new paragraph.

2. Insert this image file after the link. (To download the image, follow the link, right-clicking on the image, and choose "Save Picture As...".

-Make sure that the GIF file is in the same directory as your *.htm file.
-The link and the image should be on the same line.

3. Your page should look something like this: 


Figure 1.3: Your web page should have a title, "Hello,World!" greeting, a link, and an image.

Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok